<template>
  <div @click="showMarketingBuyBtn=false" :class="{'theme-market': showMarketingBar}">
    <section :class="hasClickPlay && courseList[courseIndex].prodType == 110 && !goInCssFull ? 'c-p c-pz1000' : hasClickPlay && courseList[courseIndex].prodType == 110 && goInCssFull ? 'c-p c-pz1003' : ''">
      <div v-if="!hasClickPlay" class="c-maxh427 c-w100 c-text-hidden c-p">
        <img :src="$addXossFilter(dataInfo.cover)" alt="" class="c-w100 c-maxh427 imgCloseBig" />
        <div class="c-pa c-p-l24 c-p-t24 c-pz99" v-if="enableBuyedInfoSwiper==1&&dataInfo.payType==2&&swiperList.length>2">
          <buy-inforswiper :swiperList='swiperList'></buy-inforswiper>
        </div>
      </div>
      <div :key="'audio'" v-else-if="hasClickPlay && (courseList[courseIndex].prodType == 111 || isVideoToAudio)" class="c-w100 c-hh452 c-text-hidden c-p c-bg-white c-p">
        <audio-com key="111" v-if="hasAudio && courseList[courseIndex] && courseList[courseIndex].assets && courseList[courseIndex].assets.items && courseList[courseIndex].assets.items.length > 0" ref="audioCom" class="c-pa c-p-b20 c-p-l0 c-w100 c-pz99"
          :canCut="!isVideoToAudio" :speedPlay="cfg && cfg.speedPlay == 0? false : true" :cover="courseList[courseIndex].courseAvatar" :isNew="true" :isFromColumn="true" :payType="courseList[courseIndex].payType" :currentIndex="courseItemIndex" :isNeedFirstPlay="false"
          :watchTime="courseList[courseIndex] && courseList[courseIndex].assets.items && courseList[courseIndex].assets.items[courseItemIndex] ? (courseList[courseIndex].assets.items[courseItemIndex].watchTime * 60 + (courseList[courseIndex].assets.items[courseItemIndex].watchTimeSeconds ? courseList[courseIndex].assets.items[courseItemIndex].watchTimeSeconds : 0)) : 0" :audioAndSrc="audioMp3Src" :audioTitle="courseList[courseIndex].assets.items[courseItemIndex].audioName"
          :audioIOSSrc="audioM3u8Src" :hasPermission="dataInfo.hasPermission" :showPlayBack="false" :hasAuditionPermission="false" :isSaleOnly="dataInfo.isSaleOnly"
          @audioCanplay="audioCanplay" @startPlay='startPlay' @onPlayTimeChange="onPlayTimeChange" :totalPlayedTime="longestTime" :curPlayTime="audioPlayTime"
          :isAllowProgressBar="cfg && cfg.isAllowProgressBar == 0 ? false : true" @audioPlayEnd="audioPlayEnd" @clickAfter="clickAfter" @clickBefor="clickBefor" @watchEnd="watchEnd"
          @audioPause="audioPause" @showFollowQr="showFollowQr" @goForm='goForm' :formflag='formflag' @clickCover="clickCover"></audio-com>
        <div v-if="isVideoToAudio" class="c-pa c-p-r0 c-w100 c-pt20 c-pb28 c-flex-row c-aligni-center c-justify-end c-p-t0 bg-change c-pz1000">
          <div @click="changemediaType" v-if="dataInfo.hasPermission && courseList[courseIndex] && courseList[courseIndex].assets && courseList[courseIndex].assets.items && courseList[courseIndex].assets.items[courseItemIndex] && courseList[courseIndex].assets.items[courseItemIndex].audioUrl && !isApp && !$isWxApp()" class="c-fs32 c-fc-white iconfont c-mr30">&#xe66d;</div>
        </div>
      </div>
      <div :key="'video'" :class="goInCssFull ? '' : 'c-pf'" class="c-w100 c-w100 c-maxw640" v-if="hasClickPlay && courseList[courseIndex].prodType == 110 && !isVideoToAudio">
        <div id="videoBox" class="videobox c-p c-minh360 c-text-hidden c-w100 fastForward" :class="[appPlayingVideo ? 'c-hh360' : '', !isXgPlayer && goInCssFull ? 'goInCssFull-style' : '']"></div>
        <div v-show="showProcessBar" :class="!isXgPlayer && goInCssFull ? 'c-pz101' : 'c-pz1000'" class="c-pa c-p-r0 c-w100 c-pt20 c-pb28 c-flex-row c-aligni-center c-justify-end c-p-t0 bg-change">
          <i @click="clickGoPicInPic" v-if="!isAndroidApp && !isIosVideoApp && isIosWechat && isMobile" class="iconfont icon-huazhonghua c-fs36  c-fc-white c-mr30"></i>
          <div @click="changemediaType" v-if="dataInfo.hasPermission && courseList[courseIndex] && courseList[courseIndex].assets && courseList[courseIndex].assets.items && courseList[courseIndex].assets.items[courseItemIndex] && courseList[courseIndex].assets.items[courseItemIndex].audioUrl && !isApp && !$isWxApp()" class="c-fs36 c-fc-white iconfont c-mr30">&#xe7a3;</div>
          <div v-if="isMobile && ((courseList[courseIndex] && courseList[courseIndex].hasPermission) || (courseList[courseIndex] && courseList[courseIndex].assets && courseList[courseIndex].assets.items && courseList[courseIndex].assets.items[courseItemIndex] && courseList[courseIndex].assets.items[courseItemIndex].allowWholeWatch == 1 && courseList[courseIndex].assets.items[courseItemIndex].isPreview == 1))" @click="goFullScreen()" class="c-fs40 c-fc-white iconfont c-mr30">&#xe79b;</div>
          <div @click="changeUrl()" class="c-fs20 c-fc-white c-hh36 c-lh c-ph10 c-br-tl24 c-br-bl24 c-bd-r0 c-bd1-white c-flex-row c-flex-center">切换源</div>
        </div>
      </div>
      <div v-if="hasClickPlay && courseList[courseIndex].prodType == 110 && !isVideoToAudio" :class="styleType == 1 ? (isMarketing && (scrollDirection == 0) ? 'hh556' : 'hh436') : (isMarketing && (scrollDirection == 0) ? 'c-hh480' : 'c-hh360')" class="c-w100"></div>
    </section>

    <!-- 营销活动倒计时 -->
    <flash-sales-time-new v-show="scrollDirection == 0 || (!(hasClickPlay && courseList[courseIndex].prodType == 110))" :class="hasClickPlay && courseList[courseIndex].prodType == 110 && (isIosAudioApp || isAndroidAudioApp) ? 'c-pf top360 c-w100 c-pz1000' : (hasClickPlay && courseList[courseIndex].prodType == 110 && !(isIosAudioApp || isAndroidAudioApp) ? 'c-pf top428 c-w100 c-pz1000' : '')"
      v-if="showMarketingBar"
      :type="dataInfo.sales? 'isSale':dataInfo.isFriendHelper ? 'isFa' : dataInfo.bargain ? 'isBargain' : 'isCollage'"
      :price="dataInfo.sales ? dataInfo.sales.price : dataInfo.collage ? dataInfo.collage.captainPrice : dataInfo.bargain ? dataInfo.bargain.reservePrice : ''"
      :from="dataInfo.collage && dataInfo.collage.collageGroupType && dataInfo.collage.collageGroupType == 2 ? 'activity' : ''"
      :startTime="dataInfo.sales ? dataInfo.sales.sales.startTime : dataInfo.bargain ? dataInfo.bargain.startTime : dataInfo.collage ? dataInfo.collage.startTime : dataInfo.faStartAt"
      :endTime="dataInfo.sales ? dataInfo.sales.sales.endTime : dataInfo.bargain ? dataInfo.bargain.endTime : dataInfo.collage ? dataInfo.collage.endTime : dataInfo.faEndAt"
      :originalPrice="dataInfo.price" :stockBargain="dataInfo.bargain && dataInfo.bargain.stock" :stock="dataInfo.sales ? dataInfo.sales.balance: ''"
      :isLimit="dataInfo.sales && dataInfo.sales.limit == 0 || (dataInfo.bargain && dataInfo.bargain.isLimitStock == 2) ? false : true" :salesTag="dataInfo.sales && dataInfo.sales.sales.tags"
      :peopleNum="dataInfo.collage && dataInfo.collage.peopleNum" :isPreheat="dataInfo.bargain && dataInfo.bargain.isPreheat" :bargainStatus="dataInfo.bargain && dataInfo.bargain.status"
      @showCoupon="showCoupon = true" @falshSalesTime="falshSalesTime" @finishFlashSales="finishFlashSales"
      :optimal="optimal"
    >
    </flash-sales-time-new>
    <template v-if="styleType == 1">
      <my-small-tabbar v-if="hasClickPlay && courseList[courseIndex].prodType == 110" :isNew="true" :class="isIosAudioApp || isAndroidAudioApp ? (isMarketing && (scrollDirection == 0) ? 'top480' : 'top360') : (isMarketing && (scrollDirection == 0) ? 'top548' : ($isWxApp() ? 'top360' : 'top428'))" class="video-tabbar c-w100 c-pz1002 c-bg-white c-box-shadow10" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType">
      </my-small-tabbar>
      <div id="divider" v-else class="minh76">
        <my-small-tabbar id="tabhBar" class="c-p c-box-shadow10" :isNew="true" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType" :class="[tabhBarFixed == true ? isiOS ? 'tab-bar-ios' : ($isWxApp() ? 'tabhBar c-wx-top0' : 'tabhBar top1')  : '', unenableTopNav ? 'c-wx-top0' : '']">
        </my-small-tabbar>
      </div>
    </template>
    <section :class="showBottomPlayer && hasClickPlay && courseList[courseIndex] && courseList[courseIndex].prodType == 111 ? 'c-pb100' : ''">
      <template v-if="styleType == 1">
        <div class="c-pb20" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
          <div class="c-bd-b12-f5">
            <div class="c-flex-row c-aligni-center c-pr24">
              <div class="c-w0 c-flex-grow1">
                <!-- 营销活动或者（有权限并且不能使用积分和没有会员折扣） 不显示下面模块  -->
                <!-- 分销市场接口没有返回isSaleOnly字段 -->
                <price-bar class="c-pt28 c-pl24" v-if="isShowPriceBar"
                  :recType="recType"
                  :dataInfo="dataInfo"
                  :chainInfo="chainInfo"
                >
                </price-bar>
                <div :class="!isMarketing && !dataInfo.hasPermission && (dataInfo.isSaleOnly == 1 || distribution) ? 'c-pt12' : 'c-pt28'" class="c-ph24">
                  <span class="c-fs30 c-fc-xblack c-fw-b">{{dataInfo.name}}</span>
                </div>
                <div class="c-ph24" v-if="dataInfo">
                  <!-- 需要展示价格和会员折扣模块的时候才有c-bd-b1 -->
                  <div class="c-pt16 c-pb20 c-fs20 c-fc-gray c-flex-row">
                    <span class="c-mr20" v-if="((cfg && cfg.enableShowCourses != 0) || dataInfo.hasPermission || distribution) && enableColumnRelates == 1">{{dataInfo.isUpdating == 1 ? '暂含' : '共含'}}{{dataInfo.hasCourse}}节</span>
                    <span class="c-mr20" v-if="!distribution && dataInfo.payType != 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))">{{dataInfo.clicks | formatNumber}}次观看</span>
                    <span class="c-mr20" v-if="!distribution && dataInfo.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))">{{dataInfo.saleCount | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</span>
                    <valid-time-com v-if="dataInfo.isSaleOnly == 1" :dataInfo="dataInfo" :prodId="extId" :prodType="cfrom.column"></valid-time-com>
                    <!-- 分销商城 没有更新 -->
                    <span v-if="dataInfo.isSync && dataInfo.isSync == 1 && !distribution && enableColumnRelates == 1" class="theme-fc c-mr20">{{dataInfo.isUpdating == 1 ? '更新中...' : '更新完毕'}}</span>
                  </div>
                </div>
              </div>
              <collect-btn-com v-if="!distribution" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.column" :prodId="extId" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
            </div>
            <!-- 引导入群 -->
            <section
              v-if="showInviteGroup"
              @click="handleShowGuidePop()"
              class="c-mh24 c-mb30 c-pl16 c-pr20 c-hh64 c-fs24 camp-guide c-flex-row c-aligni-center"
            >
              <img class="c-ww52 c-hh32" src="../../../assets/i/wap/course/group_guide.png" alt="">
              <div class="c-w0 c-flex-grow1 c-fc-xblack c-fw600 c-pl16">{{dataInfo.guideData.guideDesc}}</div>
              <div class="iconfont c-fs40 fc-3F73F8">&#xe986;</div>
            </section>
            <div v-if="!$isStore() && dataInfo.hasPermission && relatedList && relatedList.length > 0" class="c-bd-t12-f5 c-pv24 c-pl24">
              <div class="c-fs24 c-fc-xblack c-fw600">搭配学习</div>
              <div class="c-mt20 c-contextX-scroll c-fs0 c-flex-row">
                <div v-for="(item, index) in relatedList" :key="index" @click="goRevlantDetail(item.mainProdType, item.id)" class="c-ww210 c-inlineblack c-mr20 c-vcAlign-top">
                  <div class="c-ww210 c-hh140 c-p c-br6">
                    <img class="c-ww210 c-hh140 c-br4" :src="$addXossFilter(item.cover,require('../../../assets/defult270.png'))" alt="">
                    <div v-if="item.mainProdType != 9 || (item.mainProdType == 9 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                      <span class="iconfont c-fc-white c-fs20 c-vcAlign-middle">&#xe7bc;</span>
                      <span class="c-fc-white c-ml4">{{item.number}}<span class="c-ph4">·</span>{{item.mainProdType == 9 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                    </div>
                    <div v-else class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                      <span class="c-fc-white">{{item.mainProdType == 9 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                    </div>
                  </div>
                  <div class="c-fs24 c-fc-xblack c-ww210 c-mt6 c-text-ellipsis2 c-ws-pw">{{item.name}}</div>
                </div>
              </div>
            </div>
            <!-- 非强制表单入口 -->
            <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
              relType="4"  :relId="extId"  :dataInfo="dataInfo"
              classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
              @goForm="goForm" ></formEntry>

            <!-- 领取证书 -->
            <div v-if="showStudyCard" class="c-ph24 c-pv20" @click="handleClickCertificate()">
              <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
                <div class="c-ww36 c-hh40">
                  <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
                </div>
                <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
                  <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
                </div>
                <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
                  查看
                  <i class="iconfont c-pl10">&#xe635;</i>
                </div>
              </div>
            </div>
            <!-- 积分及会员，大转盘，vip入口优惠提示 -->
            <discount-tip
              :hasCircle="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
              :hasGiftRelates="dataInfo.giftRelates && dataInfo.giftRelates.length > 0 ? true : false"
              :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0"
              :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
              :isNew="true"
              :sales="dataInfo.sales"
              :collage="dataInfo.collage"
              :isFriendHelper="dataInfo.isFriendHelper"
              :distributionId="distribution"
              :couponList="couponList"
              :isMarketing='dataInfo.sales||distribution'
              :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''"
              :isiOS='isiOS'
              :showTurn="showTurn"
              :hasPermission='dataInfo.hasPermission'
              :showDiscount="showDiscount"
              :isRecommend="isRecommend"
              :dataInfo="dataInfo"
              :chainInfo="chainInfo"
              @clickShowCoupon="showCoupon = true"
              @goTOturn="goTOturn"
              @popRelate="popRelate"
              @popGiftModal="popGiftModal"
              @joinCircle="joinCircle"
              v-if="dataInfo.payType == 2 || (dataInfo.circleList && dataInfo.circleList.length)"></discount-tip>
            <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
          </div>
          <collage-persons-list v-if="!dataInfo.hasPermission && (ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
          <collocation-buy-com :prodInfo="{prodType: 9, prodId: extId}" :relateCollocationArr="relateCollocation"></collocation-buy-com>
          <more-device v-if="dataInfo.hasPermission" class="c-bd-b12-f5" :positionType="moreDeviceType" :prodInfo="{prodType: cfrom.column, prodId: extId, name: dataInfo.name}"></more-device>
          <div class="c-ph24 c-p">
            <div v-if="timingPutOn || isOffSale" class="c-pa c-w100 c-h c-flex-column c-flex-center c-fs24 theme-fc c-pz1">
              <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
              <div class="c-fs24 c-pt12 c-textAlign-c">{{isOffSale ? '专栏已下架' : '购买后可看' | iosPayText}}</div>
            </div>
            <div :class="timingPutOn || isOffSale ? 'filter-blur' : ''">
              <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distribution" ref="descriptions" :prodType="cfrom.column" :prodId="extId"></course-description>
              <div v-else class="tinymce-text c-lh42 c-pt16 c-pb30 c-ww-bw c-ww-ba c-contexty-scroll" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.description"></div>
            </div>
          </div>
          <loading-status-tem :noData="distribution && !dataInfo.description" noDataText="暂无介绍" pt20="true"></loading-status-tem>
        </div>
      </template>
      <template v-else>
        <section id="courseInfo" class="c-p" v-if="dataInfo != ''" >
          <div class="c-bd-b12-f5 c-mt24">
            <price-bar v-if="isShowPriceBar"
              :recType="recType"
              :dataInfo="dataInfo"
              :styleType="2"
              :chainInfo="chainInfo"
            >
            </price-bar>
            <discount-info class="c-mt8" v-if="!$isWxAppIos() && !distributionId && !isiOS && !dataInfo.hasPermission && dataInfo.isSaleOnly != 0 && dataInfo.payType == 2 && !isRecommend"
              :couponList="couponList"
              :isMarketing="isMarketing"
              :dataInfo="dataInfo"
              :chainInfo="chainInfo"
              @clickShowCoupon="showCoupon = true"
            >
            </discount-info>
            <div class="c-ph24 c-mt20"
              v-if="!dataInfo.hasPermission && !$isWxAppIos() && !isiOS && !isRecommend"
            >
              <vip-entry
                :styleType="2"
                :dataInfo="dataInfo"
              ></vip-entry>
            </div>
            <div class="c-ph24 c-mt24" v-if="!isRecommend || (isRecommend && dataInfo.hasPermission)">
              <div class="c-fs30 c-fc-xblack c-fw600">{{dataInfo.name}}</div>
            </div>
            <div class="c-flex-row c-aligni-center c-ph24 c-mt16 c-pb24">
              <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-w0 c-flex-grow1 c-flexw-wrap">
                <div v-if="((cfg && cfg.enableShowCourses != 0) || dataInfo.hasPermission || distribution) && enableColumnRelates == 1" class="c-mr20 c-pv4"><span class="c-fs20 iconfont c-mr4">&#xe69c;</span>{{dataInfo.isUpdating == 1 ? '暂含' : '共含'}}{{dataInfo.hasCourse}}节</div>
                <div class="c-mr20" v-if="!distribution && dataInfo.payType != 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.clicks | formatNumber}}次观看</div>
                <div class="c-mr20" v-if="!distribution && dataInfo.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.saleCount | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
                <div class="c-flex-row c-aligni-center c-mr20 c-pv4" v-if="dataInfo.isSaleOnly == 1">
                  <span class="c-fs20 iconfont c-mr4">&#xe7a6;</span>
                  <valid-time-com :dataInfo="dataInfo" :prodId="extId" :prodType="cfrom.column"></valid-time-com>
                </div>
                <div v-if="dataInfo.isSync && dataInfo.isSync == 1 && !distribution && enableColumnRelates == 1" class="c-fs20">{{dataInfo.isUpdating == 1 ? '更新中...' : '更新完毕'}}</div>
              </div>
              <div class="c-flex-row c-aligni-center">
                <div v-if="cfg.enableSales == 1 && !isiOS && dataInfo.payType == 2 && dataInfo.isSaleOnly == 1 && !distribution && dataInfo.isUserGroup != 1 && !$isWxApp() && dataInfo.isDepartments !=1" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
                  <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
                  <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
                </div>
                <collect-btn-com v-if="!distribution" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.column" :prodId="extId" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
              </div>
            </div>
            <!-- 引导入群 -->
            <invite-group class="c-pr24 c-pb24"
              v-if="showInviteGroup"
              :guideText="dataInfo.guideData.guideDesc"
              @handleShowGuidePop="handleShowGuidePop"
            >
            </invite-group>
          </div>
          <div v-if="(showTurn || hasGiftRelates || (!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0) || (dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0) || (relateCollocation && relateCollocation.length > 0)) && !isOffSale && !isUserGroup && !isStoreUserGroup" class="c-ph24 c-bd-b12-f5">
            <discount-tip :styleType="2" :prodInfo="{prodType: 9, prodId: extId}" :relateCollocationArr="relateCollocation" @joinCircle="joinCircle" :hasCircle="dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0" :hasGiftRelates="hasGiftRelates" :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0" :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
              @goTOturn="goTOturn" @popRelate="popRelate" @popGiftModal="popGiftModal"
              :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''"
              :showTurn="showTurn"></discount-tip>
          </div>
          <!-- 非强制表单 -->
          <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3 && dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
            relType="4"  :relId="extId"  :dataInfo="dataInfo"
            classObject="c-fs24 c-fw600" fontSizeClass="c-fs22" iconSizeClass="c-fs18" topClass="c-bd-b12-f5"
            @goForm="goForm" ></formEntry>
          <!-- 领取证书 -->
          <div v-if="showStudyCard" class="c-ph24 c-pv20 c-bd-b12-f5" @click="handleClickCertificate()">
            <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
              <div class="c-ww36 c-hh40">
                <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
              </div>
              <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
                <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
              </div>
              <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
                查看
                <i class="iconfont c-pl10">&#xe635;</i>
              </div>
            </div>
          </div>
          <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :defaultStyle="c-bd-b12-f5" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
          <collage-persons-list v-if="dataInfo && !dataInfo.hasPermission && (ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
          <!-- <collocation-buy-com :relateCollocationArr="relateCollocation"></collocation-buy-com> -->
          <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission && typeBar == 0" :positionType="moreDeviceType" :prodInfo="{prodType: cfrom.column, prodId: extId, name: dataInfo.name}"></more-device>
        </section>
        <div id="divider" class="c-hh76">
          <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24" :styleType="2" :class="[goInCssFull ? '' : tabhBarFixed == true ? isiOS ? 'tab-bar-ios' : ($isWxApp() ? 'tabhBar c-wx-top0' : (hasClickPlay && courseList[courseIndex].prodType == 110 && !isVideoToAudio ? 'tabhBar top2': 'tabhBar top1'))  : '', unenableTopNav ? 'c-wx-top0' : '']" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
        </div>
        <div class="c-pb40 c-minh640" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
          <div class="c-ph24 c-p">
            <div v-if="timingPutOn || isOffSale" class="c-pa c-w100 c-h c-flex-column c-flex-center c-fs24 theme-fc c-pz1">
              <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
              <div class="c-fs24 c-pt12 c-textAlign-c">{{isOffSale ? '专栏已下架' : '购买后可看' | iosPayText}}</div>
            </div>
            <div :class="timingPutOn || isOffSale ? 'filter-blur' : ''">
              <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distribution" ref="descriptions" :prodType="cfrom.column" :prodId="extId"></course-description>
              <div v-else class="tinymce-text c-lh42 c-pt16 c-pb30 c-ww-bw c-ww-ba c-contexty-scroll" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.description"></div>
            </div>
          </div>
          <loading-status-tem :noData="distribution && !dataInfo.description" noDataText="暂无介绍" pt20="true"></loading-status-tem>
          <package-index-com
            :showPackageModal="true" @clickGoAllPackage="clickGoAllPackage"
            :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="4" :proId="extId" :isHomePage="false"
            :packageList="dataInfo.combos.filter((item,index) => {return index == 0})"
            v-if="dataInfo && dataInfo.combos.length > 0 && companyAuth.enableComboModule == 1">
          </package-index-com>
        </div>
      </template>

      <div :class="typeBar == 1 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" class="c-p c-minh640" id="columnList" v-show="typeBar == 1">
        <div v-if="(cfg && cfg.enableShowCourses == 0 && (dataInfo.permissionType == 0 || (isOffSale && dataInfo.permissionType == 1)))" class="c-pa c-w100 c-h c-flex-column c-flex-center c-fs24 theme-fc c-pz1">
          <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
          <div class="c-fs24 c-pt12 c-textAlign-c">{{isOffSale ? '专栏已下架' : isUserGroup ? (dataInfo.payType != 2 ? '指定用户可观看' : '指定用户可购买') : '购买后可看' | iosPayText}}</div>
        </div>
        <div :class="(cfg && cfg.enableShowCourses == 0 && (dataInfo.permissionType == 0 || (isOffSale && dataInfo.permissionType == 1))) ? 'filter-blur' : ''">
          <div>
            <div class="c-ph24 c-flex-row c-aligni-center c-fs22 c-pv30 c-justify-sb">
              <span class="c-fc-gray c-ws-n">{{enableColumnRelates != 1 ? '' : dataInfo.isUpdating == 1 ? ('更新至' + dataInfo.hasCourse + '节') : ('共' + dataInfo.hasCourse + '节')}}</span>
              <div class="c-flex-row">
                <template v-if="!showSearch">
                  <div class="c-flex-row c-aligni-center" @click="sortAsc" v-if="sort == 'desc'">
                    <i class="iconfont c-rotate180 c-fs22 c-mr10 c-fc-sgray">&#xe8c8;</i>
                    <span class="c-fc-sblack">倒序排列</span>
                  </div>
                  <div class="c-flex-row c-aligni-center" @click="sortDesc" v-if="sort == 'asc'">
                    <i class="iconfont c-fs22 c-mr10 c-fc-sgray">&#xe8c8;</i>
                    <span class="c-fc-sblack">正序排列</span>
                  </div>
                  <div class="c-ml40" @click="clickSearch">
                    <span class="iconfont c-fc-sgray c-fs22 c-mr10">&#xe6d6;</span>
                    <span class="c-fc-sblack">搜索</span>
                  </div>
                </template>
                <div v-show="showSearch" class="c-w100 c-hh56 c-bg-f5 c-br30 c-flex-row c-aligni-center">
                  <span class="c-fs24 iconfont c-fc-gray c-mh20">&#xe6d6;</span>
                  <input v-model="searchWord" @focus='inputFocus' @blur='inputBlur' ref="searchContent" class="c-fs24 c-fc-xblack c-flex-grow1 c-bd0 c-hh50 c-lh50 c-bg-f5" type="text"
                    name="" id="" @keyup.enter="enterSearch">
                  <div @click="cancelSearch" class="c-fs22 c-fc-sblack c-pl20 c-pr28 c-bd-l1-mgray c-flex-shrink0">取消</div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ph24" v-if="courseList != null && courseList.length > 0">
            <div class="c-bg-white c-bd-b1" v-for="(item,index) in courseList" :key="index">
              <template v-if="indexAll == -1 || (indexAll == index)">
                <div :id="'p' + index" class="c-bg-white">
                  <div class="c-flex-row c-aligni-stretch c-pv30 c-justify-sb c-p">
                    <div @click="clickCourseItem(item.courseId,item.courseType,item,index)" class="c-ww150 c-hh100 c-text-hidden c-flex-row c-flex-center c-p c-br4">
                      <img class="c-maxh c-maxw imgCloseBig c-br4"
                        :src="$addXossFilter(item.courseType == 51 ? (item.liveCover != '' && item.liveCover != null ? item.liveCover : require('../../../assets/defult270.png')) : (item.courseAvatar != '' && item.courseAvatar != null ? item.courseAvatar : require('../../../assets/defult270.png')))" />
                      <div class="c-hh20 c-fs16 c-fc-white c-lh22 c-translucent-balck60 c-ph4 c-pa c-p-b6 c-p-r6 c-br4">{{item.courseType == 180?'直播间':item.courseType == 51 ? '直播' : item.courseType == 0 ? '视频' : item.courseType == 1 ? '音频' : item.courseType == 2 ? '图文' : item.prodType == 8 ? '资料' : ''}}</div>
                    </div>
                    <div @click="popDetail(index, item)" class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
                      <div :class="index == courseIndex && ((dataInfo.learningPosition && JSON.stringify(dataInfo.learningPosition) != '[]') || hasListen || hasSharePosition) ? 'theme-fc' : 'c-fc-xblack'" class="c-fs24 c-text-ellipsis2">
                        <span v-if="!item.hasPermission && item.previewLabel && (item.prodType == 110 || item.prodType == 111)" class="c-fs16 theme-fc c-inlineblack c-ph4 c-hh24 c-lh26 theme-bg-10 c-vcAlign-middle c-br4 c-mr4">{{item.prodType == 110 ? '试看' : '试听'}}</span>
                        <span v-else-if="!item.hasPermission && item.watchTime && item.watchTime > 0 && (item.prodType == 51||item.prodType == 180)" class="c-fs16 theme-fc c-inlineblack c-ph4 c-hh24 c-lh26 theme-bg-10 c-vcAlign-middle c-br4 c-mr4">试看</span>
                        <span @click.stop="clickCourseItem(item.courseId,item.courseType,item,index)" class="c-vcAlign-middle">{{item.courseType == 51 ? item.liveName : item.name}}</span>
                      </div>
                      <div class="c-flex-row c-aligni-center">
                        <div v-if="(item.courseType == 51||item.courseType == 180) && item.liveStatus == 2" class="c-mr20 c-flex-row c-aligni-center">
                          <span class="c-fs28 iconfont c-fc-gray">&#xe783;</span><span class="c-fs20 c-fc-gray c-ml4">回放</span>
                        </div>
                        <div v-else-if="(item.courseType == 51||item.courseType == 180) && item.liveStatus == 1" class="c-mr20 c-flex-row c-aligni-center">
                          <span class="c-fs20 c-fc-gray">正在直播</span>
                        </div>
                        <div v-else-if="(item.courseType == 51||item.courseType == 180) && item.liveStatus == 0" class="c-mr20 c-flex-row c-aligni-center">
                          <span class="c-fs20 c-fc-gray">未开始</span>
                        </div>
                        <template v-if="!((item.courseType == 51||item.courseType == 180) && (item.liveStatus == 0 || item.liveStatus == 1)) && dataInfo.hasPermission">
                          <div class="c-fs20 c-fc-gray" v-if="Number(item.progressRatio) == 0">未学习</div>
                          <div class="c-fs20 c-fc-gray" v-else-if="item.prodType == 8">已学习 {{Number(item.progressRatio).toFixed(0) + "%"}}</div>
                          <div class="c-fs20 c-fc-gray" v-else>已学习 {{Number(100 * item.progressRatio).toFixed(0) + "%"}}</div>
                        </template>
                        <div v-if="dataInfo.learningPosition && JSON.stringify(dataInfo.learningPosition) != '[]' && (index == ((dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex)) && !hasListen" class="c-fs16 c-flex-row c-ph6 c-hh28 c-lh30 theme-bg-10 theme-fc c-br4 c-ml20">上次学到</div>
                      </div>
                    </div>
                    <div v-if="!dataInfo.hasPermission && !item.previewLabel && item.isSaleOnly != 1 && item.prodType != 112 && item.prodType != 8"
                      class="c-flex-row c-aligni-center c-ww100 c-flex-shrink0 c-justify-end c-pl20 c-pv10">
                      <span class="c-fs24 c-fc-xblack iconfont c-ml10">&#xe863;</span>
                    </div>
                    <div @click="popDetail(index, item)" v-else-if="item.courseType != 2 && item.courseType != 51 && item.courseType != 180 && item.prodType != 8 && item.assets && item.assets.itemCount > 0"
                      class="c-flex-row c-aligni-center c-ww100 c-flex-shrink0 c-justify-end c-pl20 c-pv10">
                      <span class="c-fs18 c-fc-xblack iconfont c-ml10" v-if="item.show">&#xe6ab;</span>
                      <span class="c-fs18 c-fc-xblack iconfont c-ml10" v-else>&#xe6a9;</span>
                    </div>
                  </div>
                </div>
                <div class="c-bg-white" v-if="(item.courseType == 0 || item.courseType == 1) && item.assets && item.assets.itemCount > 0 && item.show">
                  <div @click="getClassList(index, 1)" v-if="item.prevPage > 0 && !(loadingClass && currentIndex == index)" class="c-fs22 c-fc-sgray c-textAlign-c">加载更多</div>
                  <div v-for="(sItem,sIndex) in item.assets.items" :key="sIndex">
                    <div v-if="sItem.chapterId && sItem.chapterSort == 1" @click="hideChaptList(sItem, sIndex, index)" :class="sItem.showStatus == 'hide' ? 'c-bd-b1-f6' : ''" class="c-p c-pl40 c-pr20 c-pv32">
                      <div class="c-flex-row c-aligni-center">
                        <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600 c-text-ellipsis2">{{ sItem.parentName }}(共{{ sItem.cnt }}节)</div>
                        <div class="c-pl32 iconfont c-fs24 c-fc-gray">{{ sItem.showStatus == 'hide' ? '&#xfbcd;' : '&#xe67a;'}}</div>
                      </div>
                    </div>
                    <div v-show="sItem.showStatus != 'hide'" @click="clickClassItem(index, sIndex)" :id="index + '|' + sIndex" class="c-flex-row c-aligni-center c-p c-pl40"
                      :class="[(index == courseIndex && sIndex == courseItemIndex && ((dataInfo.learningPosition && JSON.stringify(dataInfo.learningPosition) != '[]') || hasListen || hasSharePosition)) ? 'theme-fc' : 'c-fc-xblack', !sItem.chapterId || sItem.cnt == sItem.chapterSort ? 'c-bd-b1-f6' : '', !sItem.chapterId ? 'c-pv32' : 'c-pv18']">
                      <div v-if="(index == courseIndex && sIndex == courseItemIndex)" :class="isOnPlaying ? '' : 'stop-animation'" class="line-scale-pulse-out2 c-flex-row c-p c-mr10">
                        <div class="theme-bg"></div>
                        <div class="theme-bg"></div>
                        <div class="theme-bg"></div>
                        <div class="theme-bg"></div>
                      </div>
                      <div class="c-text-ellipsis2 c-fs24 c-lh40"><span v-if="!item.hasPermission && sItem.isPreview == 1 && ((sItem.watchPermission == 1 && (sItem.watchTime > 0 || sItem.watchTimeSeconds > 0)) || sItem.allowWholeWatch == 1)" class="c-fs16 theme-fc c-inlineblack c-ph4 c-hh24 c-lh26 theme-bg-10 c-vcAlign-middle c-br4 c-mr4">{{item.prodType == 110 ? '试看' : '试听'}}</span><span class="c-vcAlign-middle">{{item.courseType == 0 ? sItem.videoName : sItem.audioName}}</span></div>
                    </div>
                  </div>
                  <div v-if="loadingClass && currentIndex == index" class="loader"></div>
                  <!-- <div  class="c-fs22 c-fc-sgray c-pv24 c-textAlign-c">加载中...</div> -->
                  <div @click="getClassList(index)" v-if="item.isNextPage && !(loadingClass && currentIndex == index)" class="c-fs22 c-fc-sgray c-pv24 c-textAlign-c">点击加载更多</div>
                </div>
              </template>
            </div>
          </div>
          <loading-status-tem :pt20="true" :class="!isLoading && courseList.length <= 0 ? 'c-pv160' : ''" :noData="!isLoading && courseList.length <= 0" noDataText="暂无相关课程" :showLoading="courseList.length > 0 && showAllCourse && isLoading"
            :noMoreData="courseList.length > 0 && showAllCourse && is_page == false"></loading-status-tem>
          <div class="theme-fc c-ww200 c-hh64 c-flex-row c-flex-center c-bd1-mgray c-pf c-p-r0 c-bg-white c-br-tl36 c-br-bl36 c-box-shadow3"
            :class="tabhBarFixed == false ? 'c-p-b200' : 'c-p-b360'"
            v-if="goToLast == true && dataInfo.hasPermission && !hasDescSort && ((this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]' && courseList[(dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex]) || hasListen || hasSharePosition)"
            @click="continuePlay();">
            <span class="iconfont c-fs24">&#xe90f;</span>
            <span class="c-fs22 c-ml12">回到当前学习</span>
          </div>
        </div>
      </div>

      <!-- 搭配学习 -->
      <div class="c-pv30 c-ph24 c-minh640" :class="typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 2">
        <div v-if="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
          class="c-flex-row c-aligni-start c-pt20 c-pb20 c-bd-b1-f5"
          @click="joinCircle"
        >
          <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
            <img
              :src="$addXossFilter(dataInfo.circleList[0].avatar, require('../../../assets/defult270.png'))"
              class="c-maxh c-maxw imgCloseBig c-br10"
            />
            <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">圈子</div>
          </div>
          <div class="c-pl20 c-flex-grow1">
            <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
              <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{dataInfo.circleList[0].name}}</div>
              <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs22">{{dataInfo.circleList[0].memberCount}}人参与</div>
                <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="c-flex-row c-aligni-start c-pt20 c-pb20"
          v-for="(item, index) in relatedList" :key="index" :class="index == relatedList.length - 1 ? '' : 'c-bd-b1-f5'"
          @click="goRevlantDetail(item.mainProdType, item.id)"
        >
          <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
            <img
              :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))"
              class="c-maxh c-maxw imgCloseBig c-br10"
            />
            <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{prodTypes[item.mainProdType]}}</div>
          </div>
          <div class="c-pl20 c-flex-grow1">
            <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
              <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
              <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs22">{{item.mainProdType != 9 || (item.mainProdType == 9 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41)))) ? (item.number + '人参与') : ''}}</div>
                <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="styleType == 1" class="c-pb20 c-minh640" :class="typeBar == 3 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
        <!-- 分销没有知识套餐和关联 -->
        <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="4" :proId="extId" :isHomePage="false" :packageList="dataInfo.combos"
          v-if="dataInfo && dataInfo.combos.length > 0 && companyAuth.enableComboModule == 1"></package-index-com>
        <active-and-column v-if="relationData != ''" :columnList="relationData.columns" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
          :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :circleList="relationData.circle"></active-and-column>
      </div>
      <!-- 相关推荐 -->
      <div v-else class="c-minh640" :class="typeBar == 3 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
        <!-- 分销商城没有知识套餐和关联 -->
        <!-- <template v-if="!distributionId"> -->
        <!-- <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="1" :proId="courseId" :isHomePage="false" :packageList="dataInfo.combos" v-if="dataInfo && dataInfo.combos.length > 0"></package-index-com> -->
        <!-- <loading-status-tem v-if="relationData==''" :showLoading="true"></loading-status-tem> -->
        <active-and-column v-if="relationData != ''" :styleType="2" :columnList="relationData.columns" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
          :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :circleList="relationData.circle"></active-and-column>
        <loading-status-tem
          :noData="!relationData || (relationData.columns == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.circle == '')"
          :noDataText="'暂无推荐'"></loading-status-tem>
        <!-- </template> -->
      </div>
      <div id="commentWrap" class="c-minh640" :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 4">
        <commentCom ref="commentCom" v-show="commentStatus == 1" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.column" :prodId="extId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount"></commentCom>
      </div>
    </section>

    <section v-show="commentStatus == 1 && typeBar == 4" @click="addComment('')" class="c-ph24 c-bg-white c-hh88 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b0 c-pz9 c-box-shadow5">
      <div class="c-hh60 c-w0 c-flex-grow1 c-lh64 c-textAlign-c c-fs24 c-ph20 c-fc-gray c-bg-f2 c-br30"> 请输入评论内容</div>
    </section>
    <!-- <more-device :prodInfo="{prodType: cfrom.column, prodId: extId, name: dataInfo.name}" v-if="!$isWxApp() && isWeChat && dataInfo.hasPermission && cfg && cfg.enableMultiLearning == 1 && (cfg.multiLearningPage & 1) == 1 && cfg.multiLearningType > 1 && typeBar == 0"></more-device> -->
    <bottom-buy-com v-if="dataInfo" ref="bottomBuy" :ckFrom="9" :showNotSale="dataInfo.isSaleOut == 0 && !dataInfo.hasPermission&&dataInfo.payType!=3" :notSale="dataInfo.isSaleOut == 0" :showShareMoneyTip="true"
      :isNeedPay="!dataInfo.hasPermission && dataInfo.payType == 2" :showCommentBtn="showCommentBtnComputed"
      :deductibleAfterInvition="dataInfo.commission" :isGroupPurchase="styleType == 2 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1"
      :showPresentFriend="styleType == 2 ? false : (cfg.enableSales == 1 && !isiOS && dataInfo.payType == 2 && dataInfo.isSaleOnly == 1 && !distribution && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1)"
      :showFriendHelper="dataInfo.hasPermission == false && companyAuth.enableFriendHelper == 1 && dataInfo.collage == null && dataInfo.isFriendHelper == true && !distribution"
      :friendHelperStatus="faStatus" :showBuyButton="dataInfo.hasPermission == false"
      :showFormText="showFormText" :isNew="true" @spreadInvite="inviteFriends" :isOffSale="isOffSale" :hasExpired="hasExpired" @invitePoster="invitePoster" @groupPurchase="showGpModal=true;"
      :timingPutOn="timingPutOn" :delayTime="dataInfo.delayTime" @clickBuyNow="clickBuyPresent" @goHelpDetail="goHelpDetail" @goFormDetail="goForm" @putOn="putOn" @clickComment="clickCommentBtn">
      <div v-if="isStoreUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
        <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 bg-ccc">仅指定组织成员可{{dataInfo.payType == 2 ? '购买' : '观看'}}</div>
      </div>
      <div v-else-if="isUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
        <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 bg-ccc">仅指定用户可{{dataInfo.payType == 2 ? '购买' : '观看'}}</div>
      </div>
      <div v-else :class="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1 ? 'c-fs26' : 'c-fs28'" class="c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
        <div v-if="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1" @click="showGpModal=true;" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">团购</div>
        <template
          v-if="!dataInfo.hasPermission &&
            (((ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)) ||
              (!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.collage == null && dataInfo.isFriendHelper == true) ||
              (dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)))"
        >
          <div v-if="!((ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1)" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1" @click="clickBuyNow">
            <span class="c-fs24">{{getBuyBtnTitle}}</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
          </div>
          <div v-if="(ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">
            拼团中...
          </div>
          <div v-else-if="(ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1" @click="goBuy(-1,dataInfo.collage.collageId)" :class="dataInfo.collage.status == 1 ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">发起拼团</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.collage.captainPrice).toFixed(2)}}</span>
          </div>
          <div v-else-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.collage == null && dataInfo.isFriendHelper == true" @click="goHelpDetail" :class="faStatus == 2 ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">灌溉领取</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}0.00</span>
          </div>
          <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2) && dataInfo.bargain.userType == 1" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" class="c-hh64 c-flex-row c-flex-center c-pt4 c-w0 c-flex-grow1">
            正在砍价
          </div>
          <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" :class="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">砍价享</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.bargain.reservePrice).toFixed(2)}}</span>
          </div>
        </template>
        <template v-else>
          <div v-if="dataInfo.isSaleOnly == 0" @click="backPackage()" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">所属套餐</div>
          <template v-if="!dataInfo.hasPermission">
            <div
              v-if="dataInfo.payType==2 && (dataInfo.isSaleOnly == 1 || distributionId) && (dataInfo.isFriendHelper == false || companyAuth.enableFriendHelper == 0) && ckFrom == cfrom.column && !(dataInfo.bargain && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2))"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
            >
              立即购买
            </div>
            <div
              v-if="dataInfo.hasPermission == false && dataInfo.payType==3 && (dataInfo.isSaleOnly == 1 || distributionId) && (dataInfo.isFriendHelper == false || companyAuth.enableFriendHelper == 0) && ckFrom == cfrom.column && !(dataInfo.bargain && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2))"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="inputPsw"
            >
              输入密码
            </div>
            <div
              v-if="ckFrom == cfrom.flashSalesColumn"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
            >
              {{getBuyBtnTitle}}
            </div>
            <div
              v-if="(ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)"
            >
              拼团中...
            </div>
            <div
              v-if="(ckFrom == cfrom.collageColumn || ckFrom == cfrom.distributionCollageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              购买
              <marketing-buy-btn
                :isCollage="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :marketingPrice="Number(dataInfo.collage.captainPrice).toFixed(2)"
                :btnActivate="dataInfo.collage.status == 1 ? false : true"
                @clickBuyNow="clickBuyNow"
                @marketingBuy="goBuy(-1,dataInfo.collage.collageId)">
              </marketing-buy-btn>
            </div>
            <div
              v-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.collage == null && dataInfo.isFriendHelper == true"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              灌溉领取
              <marketing-buy-btn
                :isFriendHelp="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :btnActivate="faStatus == 2 ? true : false"
                @clickBuyNow="clickBuyNow"
                @marketingBuy="goHelpDetail">
              </marketing-buy-btn>
            </div>
            <div
              v-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              购买
              <marketing-buy-btn
                :isBargain="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :marketingPrice="Number(dataInfo.bargain.reservePrice).toFixed(2)"
                :btnActivate="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? false : true"
                :isBargaining="dataInfo.bargain.userType == 1 ? true : false"
                @clickBuyNow="clickBuyNow"
                @marketingBuy="handleClickBargainDetail(dataInfo.bargain.bargainId)">
              </marketing-buy-btn>
            </div>
          </template>
        </template>
      </div>
    </bottom-buy-com>

    <section @click="goToTop" v-if="showBottomPlayer && hasClickPlay && courseList[courseIndex].prodType == 111" class="c-ph24 translucent-white95 c-hh72 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b88 c-pz99 box-shadow-player">
      <div class="c-pl100 c-w100 c-h c-p">
        <div class="c-pa c-p-l0 p-t-14 c-br10 c-bd2-white">
          <img class="c-hh64 c-ww64 c-br10" :src="$addXossFilter(courseList[courseIndex].courseAvatar)" alt="">
          <img class="c-hh52 c-ww52 c-pa p-t6 r-14 c-pz-1 cover-rotate" :src="$addXossFilter(require('@/assets/i/wap/course/changpian.png'))" alt="">
        </div>
        <div class="c-flex-row c-aligni-center c-h">
          <div class="c-w0 c-flex-grow1 c-text-ellipsis1 c-fs24 c-fc-xblack c-pr40">{{courseList[courseIndex] && courseList[courseIndex].name ? courseList[courseIndex].name : ''}}</div>
          <div class="c-ww44 c-hh44" @click.stop="clickBottomPlayer">
            <x-circle
              :percent="timePercent"
              :stroke-width="6"
              :trail-width="6"
              stroke-color="#333333"
              trail-color="#ececec">
              <span class="c-fs26 c-fc-xblack iconfont c-p p-t-2" :class="playStatus == 1 ? '' : 'p-r-1'">{{playStatus == 1 ? '&#xe7b6;' : '&#xe74f;'}}</span>
            </x-circle>
          </div>
        </div>
      </div>
    </section>
    <section class="c-bd-t1 c-ph24 c-pv16 c-flex-row c-justify-sb c-aligni-center c-hh80 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white"
      v-if="dataInfo.hasPermission == true && dataInfo.payType == 1 && dataInfo.isInvitationCard == 0">
      <span class="c-fs24 c-fc-xblack">分享好友一起来学习</span>
      <div class="c-fs24 c-fc-white theme-bg c-pv10 c-ph40 c-br25" @click="isShowShare = true">
        立即分享
      </div>
    </section>
    <!-- 入群引导 -->
    <group-guidance ref="guidance" position="bottom" :isType="true" :groupObject="dataInfo.guideData"></group-guidance>
    <!-- 显示购买赠送积分 -->
    <point-gift :showPoints.sync="showPoints" :prodId="extId" :rewardPoints="rewardPoints"></point-gift>
    <cj-popup v-model="showTryEnd" class="c-bg-transparent">
      <div class="c-bg-white c-br20 c-p c-pv40 c-ww520" v-if="courseList[courseIndex]">
        <template>
          <div class="c-fc-sblack c-fs24 c-textAlign-c c-fw-b">提示</div>
          <div class="c-fc-gray c-fs24 c-textAlign-c c-mt32">{{courseList[courseIndex].courseType == 0 ? '试看' : '试听'}}结束，{{dataInfo.payType!=3?'购买':'输入密码'}}查看完整内容</div>
          <div v-if="dataInfo.isSaleOnly == 0" @click="backPackage()" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'立即购买' | iosPayText(ckFrom)}}</div>
          <div v-else-if="dataInfo.payType!=3" @click="clickBuyNow" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'立即购买' | iosPayText(ckFrom)}}</div>
          <div v-else @click="inputPsw" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'输入密码'}}</div>
        </template>
      </div>
      <div @click="showTryEnd = false" class="iconfont c-fc-white c-fs44 c-mt32 c-textAlign-c">&#xe84e;</div>
    </cj-popup>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(extId)"
      :prodType="9"
      :dataInfo="dataInfo"
      :chainInfo="chainInfo"
      :isMarketing="isMarketing"
    >
    </coupon-list-com>
    <!-- 推荐有礼 -->
    <recommend-present ref="recommendPresent"></recommend-present>
    <open-modal v-if="courseList.length > 0" class="c-pz10000" :openModal='showCouseList' @closeModal='showCouseList = false'>
      <div class="masker">
        <div class="c-ph24 c-bg-white br-course-list c-p">
          <div class="c-fs30 c-fc-xblack c-pv26 c-fw-b c-bd-b1 c-br-tl24 c-br-tr24">专栏目录</div>
          <div class="theme-fc c-ww200 c-hh64 c-flex-row c-flex-center c-bd1-mgray c-pf c-p-r0 c-p-b270 c-bg-white c-br-tl36 c-br-bl36 c-box-shadow3 c-pz99"
            v-if="goToLast1 == true && dataInfo.hasPermission && !hasDescSort && ((this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]' && courseList[(dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex] && courseList[(dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex].assets && courseList[(dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex].assets.items && courseList[(dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex].assets.items[dataInfo.learningPosition.innerIndex]) || hasListen || hasSharePosition)"
            @click="continuePlay();">
            <span class="iconfont c-fs24">&#xe90f;</span>
            <span class="c-fs22 c-ml12">回到当前学习</span>
          </div>
          <div class="c-pb24 c-maxh400 c-contexty-scroll" id="modelCourseList">
            <div @click="clickAllCourse" :class="showAllCourse ? 'theme-fc' : 'c-fc-xblack'" class="c-fs24 c-pv26 c-bd-b1">全部</div>
            <div @click="clickColumnCourse(index,item.courseId,item.courseType)" :id="index" v-for="(item, index) in courseListAll" :key="index"
              :class="((indexAll == index && !showAllCourse) || (index == courseIndex && courseListAll && hasLearned == true)) ? 'theme-fc' : 'c-fc-xblack'" class="c-fs24 c-pv26 c-bd-b1 c-p">
              第{{sort == 'asc' ? (dataInfo.hasCourse-index) : (index+1)}}课 | {{item.name}}
            </div>
            <loading-status-tem :noDataText="'暂无相关课程'" :noData="!isLoading && courseList.length <= 0" :showLoading="courseList.length > 0 && isLoading"
              :noMoreData="courseList.length > 0 && is_page == false"></loading-status-tem>
          </div>
        </div>
      </div>
    </open-modal>
    <open-modal class="c-pz10000" :openModal='popRelateCourse' @closeModal='popRelateCourse = false'>
      <div class="c-bg-white c-pv30 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600">搭配学习</div>
        <div class="c-maxh500 c-minh110 c-mt32 c-contexty-scroll">
          <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == relatedList.length ? '' : 'c-mb20'" v-for="(item, index) in relatedList" :key="index"
            @click="goRevlantDetail(item.mainProdType, item.id)">
            <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
              <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{prodTypes[item.mainProdType]}}</div>
              <img :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
              <p class="c-text-ellipsis2">{{item.name}}</p>
              <p v-if="item.mainProdType != 9 || (item.mainProdType == 9 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
            </div>
            <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
          </div>
        </div>
      </div>
    </open-modal>
    <show-integrate :showIntegrate="showIntegrate" :integrateCount="integrateCount" v-if="showIntegrate" @closeShareInt="showIntegrate=false;"></show-integrate>
    <related-combo :distributionId="distributionId" @closeCombo="closeCombo" @getMore="getMore" :showCombo="showCombo" :packageMore="is_page_package" :columnMore="is_page_column"
      :packageList="belongPackageList" :columnList="belongColumnList"></related-combo>
    <offical-account v-if="dataInfo && dataInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <comfirm-com :pwTip="''" :showPassword="showPassword" :noticeText="noticeText" :text="'请输入密码'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <not-support-play ref="notSupportPlay"></not-support-play>
    <group-purchase-modal ref="gpModal" @groupPurchasePay="groupPurchasePay" @colseModal="colseModal" v-show="showGpModal"></group-purchase-modal>
    <recommend-award v-if="dataInfo.recommend && dataInfo.recommend.isExist" :action="dataInfo.recommend && dataInfo.recommend.action"></recommend-award>
    <gift-modal :hasBuy="dataInfo.hasPermission" :showGiftModal="popGift" :prodList="dataInfo.giftRelates ? dataInfo.giftRelates : []" @closeGift="popGift = false"></gift-modal>
    <promote-income :lower="'c-p-t160'" v-show="showProcessBar" :class="!goInCssFull ? 'c-p c-pz1003' : ''" v-if="dataInfo && dataInfo.isSaleOut != 0 && (showInvitionCard || dataInfo.showMarketingCard)" :showInvitionCard="showInvitionCard" :showMarketingCard="dataInfo.showMarketingCard" :prodId="extId" :prodType="!distribution ? cfrom.column : cfrom.distributionColumnPay" @goInvite="inviteFriends" @goMarketingPoster="invitePoster"></promote-income>
    <!-- <learn-cer :isReceivedStudy="isReceivedStudy" ref="learnCerCom" :bigType="1"></learn-cer> -->
    <learn-cer :isReceivedStudy="isReceivedStudy" ref="learnCerCom" :bigType="1"></learn-cer>
    <!-- 入学证书 -->
    <enrol-cer :isReceivedStudy="isReceivedBuy" ref="enrolcerCom" :bigType="2"></enrol-cer>
    <!-- 关联售卖相关目录 -->
    <open-modal :openModal='showPackageList' @closeModal='showPackageList = false'>
      <package-list-tmp :isTemplate="true" ref="packageList"></package-list-tmp>
    </open-modal>
    <!-- 防录屏弹窗提示 -->
    <screen-recording-setting :recordingSetting="recordingSetting" :prodInfo="{prodType: cfrom.column, prodId: extId, name: dataInfo.name}" :showWeaAppDialog="showWeaAppDialog" @closeWeaAppDialog="showWeaAppDialog = false"></screen-recording-setting>
    <collage-grades ref="collageGrades" :relType="4" :refereeId="refereeId" :isRelForm="dataInfo.isRelForm && !dataInfo.hasFormLog" :extId="extId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :recRelateId="recRelateId" :recType="recType" :dataInfo="dataInfo"></collage-grades>
  </div>
</template>
<script>
import { XCircle } from 'ckjrweb-mp-ui/src/components/index';
import ActiveAndColumn from "@/components/templates/activeAndColumn.vue";
import showIntegrate from "@/components/templates/common/showIntegrate.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import { reportProdStudy, PROD_TYPE_ENUM } from "@/utils/userTraceLog.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import commentCom from "@/components/templates/common/commentCom.vue";
import couponListCom from "@/components/templates/couponListCom.vue";
import AudioCom from "@/components/templates/common/audio/AudioCom.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import recommendPresent from '@/components/templates/recommendPresent';
import DiscountTip from "@/components/templates/common/discountTip.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue';
import relatedCombo from '@/components/templates/relatedCombo';
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import buyInforswiper from '@/components/templates/buyInforswiper';
import courseDescription from '@/components/templates/courseDescription';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import MarketingBuyBtn from "@/components/templates/common/marketingBuyBtn.vue";
import notSupportPlay from "@/components/templates/common/notSupportPlay.vue";
import CollectBtnCom from "@/components/templates/common/collectBtnCom.vue";
import RecommendAward from "@/components/member/recommend/recommendAward.vue";
import groupPurchaseModal from "@/components/templates/common/groupPurchaseModal.vue";
import giftModal from '@/components/templates/giftModal';
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import learnCer from "@/components/templates/learnAndachCer/learnCer.vue";
import enrolCer from "@/components/templates/learnAndachCer/enrolCer.vue";
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import PackageListTmp from '@/components/templates/packageListTmp.vue';
import ScreenRecordingSetting from "@/components/templates/common/screenRecordingSetting.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import MoreDevice from "@/components/templates/moreDevice.vue"
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import pointGift from "@/components/templates/common/pointGift.vue";
import { decrypt } from "@/utils/aesTool.js";
let inputScrollTop = 0;
let courseIndexTmp = 0;
let courseItemIndexTmp = 0;
let totalTime = 0;
// let hasSetTime = false;
// let pathFrom = '';
let isClick = false;
let curPlayTime = 0;
let searchType = 1;
let lastScroll = 0;
let playedDuration = 0; //某个视频累计播放时长
let startSt = 0;
let endSt = 0;
let playTime1 = 0;
let playbackRateNow = 1;
let isChange = false;
let hasPosition = false;
const IS_IOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
const Hls = require("hls.js");
// let isFirstPlay = true;
const THEME_RGB_MAP = global.THEME_RGB_MAP;
export default {
  name: "ColumnDetail",
  components: {
    ActiveAndColumn,
    // shareMasker,
    loadingStatusTem,
    // sharePresent,
    showIntegrate,
    PackageIndexCom,
    MySmallTabbar,
    commentCom,
    couponListCom,
    XCircle,
    AudioCom,
    OpenModal,
    FlashSalesTimeNew,
    recommendPresent,
    DiscountTip,
    CollagePersonsList,
    BottomBuyCom,
    groupGuidance,
    relatedCombo,
    PriceBar,
    bargainRules,
    officalAccount,
    buyInforswiper,
    courseDescription,
    ComfirmCom,
    MarketingBuyBtn,
    notSupportPlay,
    CollectBtnCom,
    groupPurchaseModal,
    RecommendAward,
    giftModal,
    collocationBuyCom,
    PromoteIncome,
    validTimeCom,
    learnCer,
    enrolCer,
    DiscountInfo,
    VipEntry,
    InviteGroup,
    PackageListTmp,
    ScreenRecordingSetting,
    formEntry,
    MoreDevice,
    collageGrades,
    pointGift
  },
  props: [],
  data() {
    return {
      isIosWechat:IS_IOS,
      customPointName: localStorage.getItem("customPointName"),
      prodTypes: {
        '9': '打卡', //仅用于搭配学习
        '8': '资料',
        '11': '测评',
        '75': '互动测评',
        '77': '语音测评',
        '61': '知识套餐',
        '78': '训练营',
        '10': '社群',
        '7': '活动',
        '51': '直播',
        '180': '直播间',
        '41': '打卡',
        '76': '表单',
        '12': '商城',
        '53': '约课',
        '86': '预约',
        '1': '会员',
        '23': '会员',
        '110': '课程',
        '111': '课程',
        '112': '课程',
        '125': '考试',
        '129': '练习',
      },
      theme: localStorage.getItem("colorName") || 'mb5_default',
      enableBuyedInfoSwiper: JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper ? JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper : 0,
      isShowShare: false,
      isShowPresent: false,
      extId: -1, //代表是进来的，还是专栏进来的
      cfrom: global.ckFrom,
      ckFrom: global.ckFrom.column, //1. 购买VIP; 23.购买SVIP; 5. 购买课程;  7. 活动付费; 8. 资料购买; 9. 购买栏目; 10. 社群购买; 11. 购买测评; 13. 独立商城;
      cId: -1,
      distribution: 0,
      distributionId: '',
      dataInfo: "",
      tabList: [{
        title: '详情',
        index: 0,
      }, {
        title: '目录',
        index: 1,
      }],
      typeBar: 0,
      courseList: [],
      relationData: "",
      is_page: false,
      page: 1,
      limit: 10,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      tabhBarFixed: false,
      goToLast: false,
      goToLast1: false,
      showSearch: false,
      showShareMoneyTip: true, //显示分享赚钱提示
      showPassword: false, //显示密码输入
      noticeText: '',
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      searchWord: '',
      sort: 'asc',
      showPoints: false,
      rewardPoints: 0,
      accessToken: '',
      isLoading: false,
      loadingClass: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      commentStatus: 0,
      hasRelation: false,
      cloroRGB: '',
      faStatus: 1,
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      discountList: [], //被推荐人奖励优惠券
      equityList: [], //被推荐人奖励会员权益
      familyCardData: [], //被推荐人奖励亲情卡
      integral: 0, //被推荐人奖励积分
      checkText: '',
      isAutoPlaying: false, //点击任意一节开始播放后，进入自动播放
      currentPageEnd: false, //正在播放的页面已经全部播放完毕
      courseIndex: 0,
      courseItemIndex: 0,
      courseIndexTotal: 0,
      hasLearned: false,
      watchTime: 0,
      audioMp3Src: "",
      audioM3u8Src: "",
      isHasPermission: false,
      audioPlayTime: 0,
      showCouseList: false,
      indexAll: -1,
      showAllCourse: true,
      hasListen: false,
      hasDescSort: false,
      relatedList: [], //课程搭配学习列表（目前为打卡和社群）
      showIntegrate: false, //获取积分提示
      integrateCount: 0,
      showFormText: false,
      statusMap: {
        0: "直播预告",
        1: "正在直播",
        2: "直播回放",
        3: "直播结束"
      },
      showCombo: false,
      belongPackageList: [],
      belongColumnList: [],
      belongLoading: false,
      is_page_package: false,
      is_page_column: false,
      pagePackage: 1,
      pageColumn: 2,
      isSalesBegin: false, // 判断限时购正在进行
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码
      swiperList: [],
      descriptList: [],
      cfg: JSON.parse(localStorage.getItem("cfg")),
      hasClickPlay: false,
      longestTime: 0, //当前课时的progressRatio时间
      tenObj: null,
      tenData: { havePermission: 0, payerName: '', checkCode: '', vuVlue: '', vidVlue: '', onlineLogo: '', clientW: '', videoH: '', autoplay: false },
      clientW: 0,
      videoH: 0,
      playType: 1,
      popRelateCourse: false,
      hasExpired: false,
      showMarketingBuyBtn: false,
      isSelectedVoice: false,
      showBottomPlayer: false,
      timePercent: 0,
      playStatus: 0,
      showTryEnd: false,
      fromBackColumn: false,
      hasSharePosition: false,
      scrollDirection: 0,
      isOnPlaying: false,
      goInCssFull: false,
      hasAudio: true,
      isIosAudioApp: false,
      isAndroidAudioApp: false,
      timingPutOn: false,
      showProcessBar: true,
      isMobile: !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      moveDirection: 0, //1点击靠右的tab；2点击靠左的tab
      isOffSale: false, //是否下架
      isCollect: false,
      bindPhoneSetting: null,
      showGpModal: false,
      videoBindPhoneSetting: null,
      audioBindPhoneSetting: null,
      recType: 0, //推荐类型 1 访问 2 绑定 3 支付
      recRelateId: "", //推荐人ID
      popGift: false, //赠送礼包
      carouselType: 1,
      placeType: 1,
      videoWidth: 0,
      videoHeight: 0,
      relateCollocation: [],
      showStudyCard:false,
      isReceivedStudy:0,
      isReceivedBuy:0,
      isXgPlayer: false,
      clampTranslateY: 50,
      styleType: JSON.parse(localStorage.getItem("cfg")).viewFormat == 2 ? 2 : 1,
      showPackageList: false, // 展示关联售卖列表弹窗
      showWeaAppDialog: false, // 显示防录屏弹窗
      recordingSetting: null, // 防止录屏平台设置
      openAppScreen: false, // 是否开启app防录屏
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
      chainInfo: '',
      isChainProd: false,
      optimal: null, // 最低价格返回对象
      isWeChat: utilJs.isWeiXin(),
      moreDeviceType: 1, //1: 页面中间 2：固定在底部 进入页面在页面中间，向上滚动后固定在底部
      currentIndex: 0,
      isVideoToAudio: false, //是否是视频转音频播放
      isApp: false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    showMarketingBar() {
      return this.dataInfo && !this.dataInfo.hasPermission &&
        (
          this.dataInfo.sales ||
          (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageColumn || this.ckFrom == this.cfrom.distributionCollageColumn) && this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
          this.dataInfo.isFriendHelper
        )
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
        let discountPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
        if (this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(discountPrice)) {
          let chainName = this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? '复购' : (this.chainInfo.userType == 1 ? '普通用户' : this.chainInfo.userType2Name[this.chainInfo.userType])
          btnTxt = chainPrice != this.dataInfo.price && chainName ? chainName + '专享价' : '立即购买';
        } else {
          btnTxt = discountPrice * 1 != this.dataInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        }
        if (this.dataInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    // 判断是否是推荐有礼;
    isRecommend() {
      return this.recType == 3 && this.dataInfo.recommend && this.dataInfo.recommend.isExist
    },
    // 是否展示标签价格
    isShowPriceBar() {
      return !this.isOffSale && !this.isMarketing && !this.dataInfo.hasPermission && (this.dataInfo.isSaleOnly == 1 || this.distribution) && !this.dataInfo.sales && !this.dataInfo.collage
    },
    // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
    showInvitionCard() {
      let showInvitionCardTmp = ((this.dataInfo.isInvitationCard == 1 && (this.ckFrom == this.cfrom.column || this.ckFrom == this.cfrom.flashSalesColumn)) || this.distribution) && !this.dataInfo.isFriendHelper && this.dataInfo.collage == null && this.dataInfo.sales == null && this.dataInfo.bargain == null && (this.dataInfo.recommend == null || (this.dataInfo.recommend != null && this.dataInfo.recommend.isExist == 0))
      return showInvitionCardTmp
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.dataInfo.isSaleOnly != 0 && this.dataInfo.hasPermission == false && this.dataInfo.payType == 2
      return showdiscount
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
        ? this.dataInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
          ? this.dataInfo.svipDiscount
          : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
            ? this.dataInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal) {
        // 链动价格
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        // 当链动价格存在且链动价格跟常规身份价格对比时，如果链动小于或者等于身份价格取链动价格
        calculationPrice = this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(calculationPrice) ? chainPrice : calculationPrice;
        if (this.dataInfo.isFriendHelper) {
          calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
        }
      }
      return calculationPrice;
    },
    hasGiftRelates() {
      let hasGiftRelatesTmp = this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0;
      return hasGiftRelatesTmp;
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.dataInfo &&
        (this.dataInfo.sales ||
          (this.dataInfo.bargain &&
            ((this.dataInfo.bargain.status == 1 &&
              this.dataInfo.bargain.isPreheat == 1) ||
              this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageColumn || this.ckFrom == this.cfrom.distributionCollageColumn) &&
            this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || this.dataInfo.isFriendHelper)
      return isMarketing
    },
    //不显示优惠券
    isFavourable() {
      let isFavourable = this.dataInfo && ((this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || this.dataInfo.isFriendHelper)
      return isFavourable
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.dataInfo.joinActivityInfo
      && this.dataInfo.joinActivityInfo.isJoinActivity == 1
      && !(
        ((this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount == 0) ||
        (this.vipType == 2 && this.dataInfo.vipDiscount == 0) ||
        ((this.vipType == 2 || this.vipType == 4) && this.dataInfo.svipDiscount == 0)
      )
      return showturn;
    },
    formflag() {
      let formflag = (this.dataInfo.payType == 1 || (this.dataInfo.payType == 2)) && this.dataInfo.collectPage != 3 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1
      return formflag
    },
    // 是否显示评论
    showCommentBtnComputed() {
      // enableComment 1: 详情开启评论，0：隐藏评论，2：使用全局设置判断是否开启评论
      let isShowComment = false;
      if (this.dataInfo.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
        isShowComment = true;
      } else if (this.dataInfo.enableComment == 0) {
        isShowComment = false;
      } else if (this.dataInfo.enableComment == 2) {
        // dataInfo.hasPermission && cfg && cfg.enableComment == 1 && !distributionId
        if (this.cfg && this.cfg.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
          if (this.cfg && this.cfg.enableColumnComment == 1) {
            isShowComment = true;
          } else {
            isShowComment = false;
          }
        } else {
          isShowComment = false;
        }
      }
      return isShowComment;
    },
    isUserGroup() { // true: 指定用户购买或者观看，但是该用户不属于指定用户  false：非指定用户购买或者观看，或者该用户属于指定用户
      let isUserGroup = ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isUserGroup == 1 && this.dataInfo.isInUserGroup != 1);
      return isUserGroup;
    },
    // isDepartments： 是否开启指定组织，1是0否   isUserInDepartment：当前用户是否在指定组织中，1是0否
    isStoreUserGroup() {
      let flag = this.$isStore() && ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isDepartments == 1 && this.dataInfo.isUserInDepartment != 1);
      return flag;
    },
    showInviteGroup() { //是否展示引导入群入口 dataInfo.guideData.showPosition 1:获得权限前展示 2:获得权限后展示 3:始终展示
      let showPosition = this.dataInfo && this.dataInfo.guideData && (this.dataInfo.guideData.showPosition == 3 || (this.dataInfo.guideData.showPosition == 1 && (!this.dataInfo.hasPermission || (this.dataInfo.payType == 1 && this.dataInfo.isSaleOnly != 0))) || (this.dataInfo.guideData.showPosition == 2 && this.dataInfo.hasPermission))
      let inviteGroup = this.dataInfo && this.dataInfo.guideData && showPosition && this.dataInfo.guideData.isOpenGuide == 1 && this.dataInfo.guideData.guideType.includes(1);
      return inviteGroup
    }
  },
  mounted() { },
  watch: {
    $route(to, from) {
      // 新增专栏可以关联专栏后，可能会从出现从专栏详情页跳入专栏详情页的情况，无法进入activate
      if (to.path == '/homePage/column/columnDetail' && from.path == '/homePage/column/columnDetail') {
        if (this.courseList && this.courseList.length > 0 && this.courseList[this.courseIndex].hasPermission && (this.courseList[this.courseIndex].courseType == 1 || this.isVideoToAudio) && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex] && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying && startSt != 0) { //将之前播放的停掉
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
            let progress = Number(curPlayTime / totalTime).toFixed(2);
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
          } else {
            lastScroll = 0;
            playedDuration = 0;
          }
          this.stopVoice();
        }
        this.initData();
      }
    }
  },
  methods: {
    changemediaType() {
      if (startSt != 0 && this.dataInfo.hasPermission && this.isVideoToAudio) {
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
          let progress = Number(curPlayTime / totalTime).toFixed(2);
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
          if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) > Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) && (progress != 1)) {
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = progress;
          }
          this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, 0, playedDuration);
        } else {
          startSt = 0
          endSt = 0;
          lastScroll = 0;
          playedDuration = 0;
        }
      } else if (startSt != 0 && this.dataInfo.hasPermission && !this.isVideoToAudio) {
        let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
        let videoDuration = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration()) : 0;
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        if (currentTime > 2 && playedDuration > 0.2) {
          let progress = Number(currentTime / videoDuration).toFixed(2);
          this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, 0, playedDuration);
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
          if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) > Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) && (progress != 1)) {
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = progress;
          }
        } else {
          startSt = 0
          endSt = 0;
          playedDuration = 0;
        }
      }
      if (!this.isVideoToAudio) {
        this.isVideoToAudio = true;
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
        this.clickStartVoice(this.courseIndex, this.courseItemIndex);
      } else {
        this.isVideoToAudio = false;
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
        this.seeVideo(this.courseIndex, this.courseItemIndex);
      }
    },
    hideChaptList(item, sIndex, index) {
      if (item.showStatus != 'hide') {
        for (let i = 0; i < item.cnt; i++) {
          if (this.courseList[index].assets.items[sIndex] && this.courseList[index].assets.items[sIndex].chapterId == item.chapterId) {
            this.$set(this.courseList[index].assets.items[sIndex + i], "showStatus", 'hide');
          }
        }
      } else {
        for (let i = 0; i < item.cnt; i++) {
          if (this.courseList[index].assets.items[sIndex] && this.courseList[index].assets.items[sIndex].chapterId == item.chapterId) {
            this.$set(this.courseList[index].assets.items[sIndex + i], "showStatus", 'show');
          }
        }
      }
    },
    getCommentCount(count = 0) {
      if (count && count > 0) {
        const index = this.tabList.findIndex(i => i.title == '评论')
        index > -1 && this.$set(this.tabList[index], "smallNum", count);
      }
    },
    addComment() {
      this.typeBar = 4
      this.$nextTick(() => {
        if (this.$refs.commentCom) {
          this.$refs.commentCom.public_addComment()
        }
      })
    },
    popPresentCourse() {
      if (this.$refs.bottomBuy) {
        this.$refs.bottomBuy.isShowPresent = true;
      }
    },
    clickGoAllPackage(data) {
      this.$refs.packageList.initModalData(data);
      this.$nextTick(() => {
        this.showPackageList = true;
      })
    },
    toExitCssFullScreen() {
      this.goInCssFull = false;
      if (!(this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf)) {
        return;
      }
      document.querySelector(".mlamp").style = "top:0;left:0;overflow-x:hidden;";
      document.querySelector(".clamp").style = `font-size:${(this.dataInfo.marqueConf.userName.length > 13 ? (this.dataInfo.marqueConf.size > 26 ? 26 : this.dataInfo.marqueConf.size) : this.dataInfo.marqueConf.size) / 40}rem;color:${this.dataInfo.marqueConf.color};opacity:${this.dataInfo.marqueConf.transparent / 100};`;
      this.tenObj.on('rotate', (deg) => {
        document.querySelector(".mlamp").style = "top:0;left:0;overflow-x:hidden;";
        document.querySelector(".clamp").style = `font-size:${(this.dataInfo.marqueConf.userName.length > 13 ? (this.dataInfo.marqueConf.size > 26 ? 26 : this.dataInfo.marqueConf.size) : this.dataInfo.marqueConf.size) / 40}rem;color:${this.dataInfo.marqueConf.color};opacity:${this.dataInfo.marqueConf.transparent / 100};`;
      })
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=9&prodId=${this.extId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0, 3) : [];
        }
      );
    },
    joinCircle() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {id: this.dataInfo.circleList[0].circleId}
      });
    },
    cancleCollectPop() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.column,
        prodId: this.extId,
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/cancelCollect`, postData, (res) => {
        this.$showCjToast({
          text: "收藏已取消",
          type: 'text',
        });
        this.cancelCollect();
      });
    },
    doCollectPop() {
      if ((this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) || (this.bindPhoneSetting && this.bindPhoneSetting.collectBind)) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.column,
        prodId: this.extId
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/addToCollect`, postData, (res) => {
        this.$showCjToast({
          text: "课程已收藏",
          type: 'text',
        });
        this.doCollect();
      });
    },
    doCollect() {
      this.isCollect = true;
    },
    cancelCollect() {
      this.isCollect = false;
    },
    initIosAppData() {
      window['iosClickBack'] = this.appGoBack; //ios app点击返回，没有触发deactivated
    },
    appGoBack() {
      this.toLeave();
    },
    clickCover(e) {
      wxUtilJs.previewImage({
        current: this.courseList[this.courseIndex].courseAvatar, // 当前显示图片的http链接
        urls: [this.courseList[this.courseIndex].courseAvatar]
      });
    },
    goFullScreen() {
      this.$cjConfirm({
        title: '如何无线投屏？',
        message: '<div style="text-align:left;"><p>请先开启目标设备，根据目标设备的要求进行设置（注：有的设备要求手机需要下载对应软件 ）。请确保手机跟要投屏的目标设备已连接上，如果您的微信聊天界面已经在投屏设备上显示出来了，那么证明已经连接成功；可以去对应的课程页面进行播放，然后点击全屏按钮进行大屏观看。</p><p>因为手机型号，投屏接收设备等问题，具体如何匹配成功，可以进行百度了解。无线投屏是手机自带的功能，苹果手机基本上都能支持，安卓手机部分机型支持，部分手机不支持。</p></div>',
        showCancelButton: false,
      })
    },
    //进入画中画
    clickGoPicInPic() {
      if (document.pictureInPictureEnabled && document.querySelector("#videoBox video")) {
        document.querySelector("#videoBox video").requestPictureInPicture();
      }
    },
     closePicInPic() {
      document.pictureInPictureElement && document.exitPictureInPicture();
    },
    //切换视频源
    changeUrl: function () {
      if (this.tenObj) {
        let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
        let videoDuration = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration()) : 0;
        if (currentTime > 2 && videoDuration > 0 && startSt != 0 && this.courseList[this.courseIndex].hasPermission) {
          let progress = Number(currentTime / videoDuration).toFixed(2);
          if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio == 1)) {
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
          } else {
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = progress;
          }
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (playedDuration > 0.2) {
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, 0, playedDuration);
          } else {
            startSt = 0;
            endSt = 0;
            playedDuration = 0;
          }
        }
        this.tenObj.pause();
        this.destroyPlayer();
        this.tenObj = null;
      }
      this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
      this.playBtn(this.courseIndex, this.courseItemIndex, 1);
    },
    putOn() {
      this.dataInfo.status = 1;
      this.timingPutOn = false;
    },
    goToTop() {
      window.scrollTo(0, 0);
    },
    //跑马灯
    getMarqueConf() {
      let cs = (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf && this.dataInfo.marqueConf.showCopy == 1) ? (`
          <div class="mlamp c-bg-black c-opacity50 c-pa c-pz1002 c-hh32 c-w100" style="overflow-x:hidden;left:0;top:0;">
            <div class="ccopyright-marque c-pv4 c-fc-white c-fs20 c-ws-n c-p c-w100" style="animation-duration:${this.dataInfo.marqueConf.versionSpeed + (0.03 * this.dataInfo.marqueConf.copyright.length)}s">${this.dataInfo.marqueConf.copyright}</div>
          </div>
        `) : '';
      let us = '';
      if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf && this.carouselType == 1) {
        us = (`
          <div class="clamp img-pe-none c-text-hidden c-pz1002 c-w100 c-ws-n c-h c-p-t0" style="font-size:${(this.dataInfo.marqueConf.userName.length > 13 ? (this.dataInfo.marqueConf.size > 26 ? 26 : this.dataInfo.marqueConf.size) : this.dataInfo.marqueConf.size) / 40}rem;color:${this.dataInfo.marqueConf.color};opacity:${this.dataInfo.marqueConf.transparent / 100};">
          <div class="clamp-text c-p img-pe-none c-ws-pw c-wb-ba ${this.placeType == 1 || this.placeType == 2 || this.placeType == 5 ? 'cuser-marque' : 'cuser-vertical-marque'} ${this.placeType == 3 ? 'c-p-l0' : this.placeType == 4 ? 'left96p' : ''}" style="animation-duration:${this.dataInfo.marqueConf.speed + 0.03 * (this.dataInfo.marqueConf.userName.length + this.dataInfo.marqueConf.userId.length)}s;width: ${this.placeType == 1 || this.placeType == 2 || this.placeType == 5 ? '100%' : '0.4rem'};transform: translateY(-${this.placeType == 1 ? 50 : this.placeType == 2 ? 102 : this.placeType == 5 ? this.clampTranslateY : 0}%);top: ${this.placeType == 1 ? 50 : this.placeType == 2 ? 100 : this.placeType == 5 ? this.clampTranslateY : 0}%;">${this.dataInfo.marqueConf.userName}ID:${this.dataInfo.marqueConf.userId}</div>
          </div>
        `);
      } else if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf && this.carouselType == 2) {
        us = (`
          <div class="clamp img-pe-none c-text-hidden c-pz1002 c-w100 c-ws-n c-h c-p-t0" style="font-size:${(this.dataInfo.marqueConf.userName.length > 13 ? (this.dataInfo.marqueConf.size > 26 ? 26 : this.dataInfo.marqueConf.size) : this.dataInfo.marqueConf.size) / 40}rem;color:${this.dataInfo.marqueConf.color};opacity:${this.dataInfo.marqueConf.transparent / 100};">
          <div class="c-pa img-pe-none ${this.placeType == 1 ? 'c-p-lp50 c-translate-x-50 tp50' : this.placeType == 2 ? 'c-p-lp50 c-translate-x-50 c-p-b4' : this.placeType == 3 ? 'c-p-l4 c-p-b4' : 'c-p-r6 c-p-b4'}">${this.dataInfo.marqueConf.userName}ID:${this.dataInfo.marqueConf.userId}</div>
          </div>
        `);
      }
      // let us = (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf) ? (`
      //     <div class="clamp c-p-tp50 img-pe-none c-text-hidden c-pz98 c-w100 c-ws-n" style="font-size:${this.dataInfo.marqueConf.size / 40}rem;color:${this.dataInfo.marqueConf.color};opacity:${this.dataInfo.marqueConf.transparent / 100};transform: translateY(-50%);">
      //     <div class="cuser-marque c-p img-pe-none">${this.dataInfo.marqueConf.userName}ID:${this.dataInfo.marqueConf.userId}</div>
      //     </div>
      //   `) : '';
      return cs + us;
    },
    popRelate() {
      this.popRelateCourse = true;
    },
    popGiftModal() {
      this.popGift = true;
    },
    popMarketingBuy() {
      this.showMarketingBuyBtn = true;
    },
    async clickClassItem(index, sIndex) {
      // 没有流量也不让观看
      if (await this.$refs.notSupportPlay.checkVideoFlowOver() == 1) {
        this.$refs.notSupportPlay.public_noStreamSupport();
        return;
      }
      //非微信 && 非移动端 不让观看
      if (utilJs.isOpenPcGuard()) {
        this.$refs.notSupportPlay.public_openNoSupport();
        return;
      }
      if (this.timingPutOn || this.isOffSale || this.isUserGroup || this.hasExpired || this.isStoreUserGroup) {
        let noticeText = '';
        if (this.isStoreUserGroup) {
          if (this.dataInfo.payType != 2) {
            noticeText = "指定组织成员可观看";
          } else {
            noticeText = "指定组织成员可购买";
          }
        } else if (this.isUserGroup) {
          if (this.dataInfo.payType != 2) {
            noticeText = "指定用户可观看";
          } else {
            noticeText = "指定用户可购买";
          }
        } else if (this.isOffSale) {
           noticeText = "该专栏已下架！";
        } else if (this.hasExpired) {
          noticeText = "该专栏已失效！";
        } else {
          noticeText = "该专栏暂未开售！"
        }
        // let noticeText = this.isUserGroup
        //  ? (this.dataInfo.payType != 2 ? '指定用户可观看' : '指定用户可购买')
        //   : this.isOffSale ? '该专栏已下架！' : this.hasExpired ? '该专栏已失效！' : '该专栏暂未开售！'
        this.$showCjToast({
          text: noticeText,
          type: 'text'
        });
        return;
      }
      // 添加防录屏判断
      if (this.recordingSetting && this.recordingSetting.screenRecording == 1 &&
        ((this.recordingSetting.ckH5Shop == 0 && !this.$isWxApp() && !utilJs.isAndroidApp() && !utilJs.isIOSAppALL()) || (this.recordingSetting.ckShopMiniProgram == 0 && this.$isWxApp())) &&
        (((this.recordingSetting && this.recordingSetting.fitCourses == 1) || (this.courseList[index].courseScreen)) && this.courseList[index].courseType == 0)) {
        this.showWeaAppDialog = true;
        return
      }
      if (this.recordingSetting && this.recordingSetting.screenRecording == 1 &&
        this.recordingSetting.ckApp == 0 && (utilJs.isAndroidApp() || utilJs.isIOSAppALL()) &&
        (((this.recordingSetting.fitCourses == 1) || (this.courseList[index].courseScreen)) && this.courseList[index].courseType == 0)) {
        this.openAppScreen = true;
        utilJs.sendDataToAppWebview('banScreenRecording');
      }
      this.showProcessBar = true;
      if (
        (this.courseList[this.courseIndex].prodType == 110 || this.courseList[this.courseIndex].prodType == 111) &&
        this.courseList[this.courseIndex] &&
        this.courseList[this.courseIndex].assets &&
        this.courseList[this.courseIndex].assets.items &&
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex]
      ) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
      }
      if (this.courseList[index].prodType == 110 && !this.isVideoToAudio) {
        //视频
        this.seeVideo(index, sIndex);
      } else if (this.courseList[index].prodType == 111 || this.isVideoToAudio) {
        //音频
        if (this.courseList[index].prodType == 111) {
          this.isVideoToAudio = false;
        }
        this.clickStartVoice(index, sIndex);
      }
    },
    clickBottomPlayer() {
      this.$refs.audioCom.clickPlay();
    },
    destroyPlayer() {
      this.closePicInPic();
      destoryPlayer(this.tenObj);
      this.tenObj = null;
      // if (document.querySelector("#videoBox")) {
      //   document.querySelector("#videoBox").style.cssText = '';
      // }
      // this.hasVideo = false;
    },
    /**
     * 给后端数据埋点使用，点击的时候上报学习记录（调用课程详情接口后端就会记录学习）
     */
    reportCourseStudyByColumn(courseId, courseType) {
      if (this._reportStudyDetail[courseId]) {
        return;
      }
      this._reportStudyDetail[courseId] = 1;
      reportProdStudy(courseId, courseType);
    },
    //点击播放目录中的某个视频
    seeVideo: function (index, sIndex) {
      if (this.videoBindPhoneSetting && this.videoBindPhoneSetting.getBind && utilJs.goBindMobile()) {
        return;
      }
      // 分销的课程第一节可试看
      if (
        this.courseList[index].hasPermission ||
      (this.courseList[index].assets.items[sIndex].watchPermission == 1 &&
        (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0) &&
        this.courseList[index].assets.items[sIndex].isPreview == 1) ||
      (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1 &&
        this.courseList[index].assets.items[sIndex].isPreview == 1)
      ) {
        if (startSt != 0 && this.courseList[this.courseIndex].hasPermission && this.courseList.length > 0 && (this.courseList[this.courseIndex].courseType == 1 || this.isVideoToAudio) && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) { //将之前播放的停掉
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
            let progress = Number(curPlayTime / totalTime).toFixed(2);
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
          } else {
            lastScroll = 0;
            startSt = 0
            endSt = 0;
            playedDuration = 0;
          }
        } else if (startSt != 0 && this.courseList[this.courseIndex].hasPermission && this.courseList.length > 0 && this.courseList[this.courseIndex].courseType == 0 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) {
          let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
          let videoDuration = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration()) : 0;
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (currentTime > 2 && playedDuration > 0.2) {
            let progress = Number(currentTime / videoDuration).toFixed(2);
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, 0, playedDuration);

            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
            // this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = true;
            if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) > Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) && (progress != 1)) {
              this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = progress;
            }
          } else {
            startSt = 0
            endSt = 0;
            playedDuration = 0;
          }
        }
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
        this.hasClickPlay = true;
        this.courseIndex = index;
        this.courseItemIndex = sIndex;
        this.hasListen = true;
        this.hasSharePosition = false;
        //处理业务逻辑
        this.$nextTick(() => {
          this.playBtn(this.courseIndex, this.courseItemIndex, 0);
        })
      } else {
        if (this.dataInfo.payType == 3) {
          this.$showCjToast({
            text: '输入密码后可以观看完整视频',
            type: 'text'
          });
        } else {
          this.$showCjToast({
            text: '购买后可以观看完整视频',
            type: 'text'
          });
        }
        //this.clickBuyNow();
      }
    },
    playBtn: function (index, sIndex, isChangeUrl) {
      //对于安卓手机不是微信浏览器内的，暂不支持播放
      let isMobile = !!window.navigator.userAgent.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
      let isWA = isMobile && !navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != 'micromessenger' ? true : false; //判断是不是移动端但是不是微信内
      let isDouyin = !!navigator.userAgent.includes('aweme'); // 判断是否是抖音浏览器
      if (isWA && !isDouyin) {
        this.$showCjToast({
          text: '此浏览器暂不支持播放视频，请去微信内或者pc电脑端打开该课程进行观看视频！',
          type: "text",
        });
        return;
      }
      if ((((!this.dataInfo.hasPermission || this.dataInfo.payType == 1) && this.dataInfo.collectPage == 1) || ((this.dataInfo.hasPermission || this.dataInfo.payType == 3) && this.dataInfo.collectPage != 3)) && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false) {
        this.goForm('', 0, null, 1);
        return
      }
      this.isVideoToAudio = false;
      //有权限 || (播放第一节 && 第一节可试看 &&(总节数>1 || 分销的课程))
      if (
        this.courseList[index].hasPermission ||
        (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1 &&
          this.courseList[index].assets.items[sIndex].isPreview == 1)
      ) {
        //给后端数据埋点使用，点击的时候上报学习记录（调用课程详情接口后端就会记录学习）
       this.reportCourseStudyByColumn(this.courseList[index].courseId, PROD_TYPE_ENUM.VIDEO);
        // if (((index == this.dataInfo.items.length - 1) || (index == this.dataInfo.items.length - 2)) && this.is_courseListPage && !this.courseListLoading && !this.distributionId) {
        //   this.getCourseList();
        // }
        //分销暂时不记录学到哪一节
        if (this.dataInfo.hasPermission && !this.distributionId) {
          let itemIndex = this.courseList[this.courseIndex].prevPage ? this.courseList[this.courseIndex].prevPage * 20 + this.courseItemIndex : this.courseItemIndex;
          this.setCourseProgress(this.courseIndex, itemIndex)
          this.setCourseMemberLog(this.courseIndex)
        }
        if (this.tenObj) {
          this.tenObj.pause();
          this.destroyPlayer();
          this.tenObj = null;
        }
        if (document.querySelector("#videoBox") != undefined && document.querySelector("#videoBox").innerHTML != null) {
          document.querySelector("#videoBox").innerHTML = "";
          if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf) {
            document.querySelector("#videoBox").innerHTML = this.getMarqueConf();
          }
        }
        if (document.querySelector("#boxInfo") != undefined && document.querySelector("#boxInfo").innerHTML != null) {
          document.querySelector("#boxInfo").innerHTML = '';
        }

        let u = navigator.userAgent;
        // let isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//andrio终端
        // let mobile = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
        //西瓜播放器相关代码
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl == '' || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl == null) {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url;
        }
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url == '' || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url == null) {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
        }
        // if (isMobile) {
          //切换视频源，安卓用mp4的，ios用的时候m3u8的，但是如果切换视频源的话，就把mp4的转换成m3u8的格式
        if (isChangeUrl == 1) {
          isChange = !isChange
          if (isChange) {
            this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url
          } else {
            this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
          }
        } else {
          this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
        }
        // } else {
        //   this.tenData.vuValue = /macintosh|mac os x/i.test(navigator.userAgent) ? this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl : this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url;

        //   //走腾讯云的域名，http换成https
        //   this.tenData.vuValue = this.tenData.vuValue.replace("http://", "https://");
        // }
        let videoObj = {
          videoMp4: this.tenData.vuValue,
          videoM3U8: this.tenData.vuValue, //isChangeUrl == 1 ? this.tenData.vuValue : this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl,
          autoplay: true,
          fluid: false,
          isCssFullScreen: this.cfg && this.cfg.isFullScreen == 1 && !this.hasInterct ? false : true,
          poster: '',
          marqueConf: this.getMarqueConf(),
          isMoreVideo: 1,
          rotateScreenToggle: true, //是否开启伪全屏的旋转按钮
          playerCtx: this, //当前播放器的上下文
          isPlaybackRate: this.cfg.speedPlay == 1 ? false : true,
          allowFastForward: true,
          rotateVideoCB() { //视频旋转回调（具体业务这里处理，this指向当前上下文）
            this.tcRotateVideo();
          },
          recoverRotateVideoCB() { //视频旋转恢复回调函数（具体业务这里处理，this指向当前上下文）
            this.tcRecoverRotateVideo();
          },
          fastRewindCB() {
            this.clickFastRewindCB();
          },
          fastForwardCB() {
            this.clickFastForwardCB();
          }
        }
        this.tenObj = getXgplayer('videoBox', videoObj);
        this.$nextTick(function () {
          this.videoWidth = document.querySelector("#videoBox").offsetWidth;
          this.videoHeight = document.querySelector("#videoBox").offsetHeight;
        })
        let $this = this;
        if (this.tenObj.playerType == "xg") {
          this.isXgPlayer = true;
          this.tenObj.on('ready', () => {
            document.querySelector(".xgplayer-start").style.zIndex = 99;
          });
        }
        this.tenObj.on("play", () => {
          this.isOnPlaying = true;
          if (this.courseList[index].hasPermission) {
            endSt = 0;
            playedDuration = 0;
            startSt = new Date().getTime();
          }
        })
        this.tenObj.on("pause", () => {
          this.isOnPlaying = false;
          if ($this.courseList[index].hasPermission == true && $this.tenObj && startSt != 0) {
            let currentTime = ($this.tenObj != null && $this.tenObj != '') ? ($this.tenObj.playerType == "xg" ? $this.tenObj.currentTime : $this.tenObj.currentTime()) : 0;
            let videoDuration = ($this.tenObj != null && $this.tenObj != '') ? ($this.tenObj.playerType == "xg" ? $this.tenObj.duration : $this.tenObj.duration()) : 0;
            endSt = new Date().getTime();
            playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
            if (currentTime > 2 && playedDuration > 0.2) {
              let progress = Number(currentTime / videoDuration).toFixed(2);
              $this.setProgress($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].detailId, progress, 0, playedDuration);

              $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio = progress;
              $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].goProcess = true;
              if (Number($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio) > Number($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio) && (progress != 1)) {
                $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio = progress;
              }
            } else {
              startSt = 0
              endSt = 0;
              playedDuration = 0;
            }
          }
        });
        // PC微信不支持touchstart touchend事件 点击事件无法获取点击之前的播放进度，所以这边实时保存播放进度待点击时使用
        this.tenObj.on("timeupdate", (ev) => {
          if (
            !this.courseList[this.courseIndex].hasPermission &&
            (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchPermission == 1 &&
            (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTime > 0 || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds > 0) &&
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPreview == 1)
          ) {
            let isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//andrio终端
            let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
            let tryWatchTime = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTime * 60 + (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds ? Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds) : 0);
            if ((this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) > tryWatchTime) {
              if (!isMobile || isAnd) {
                this.tenObj.pause();
              }
              if (this.tenObj.playerType == "tc" && this.tenObj.isFullscreen()) {
                this.tenObj.exitFullscreen();
              }
              this.destroyPlayer();
              this.$nextTick(() => {
                this.hasClickPlay = false;
              })
              this.showTryEnd = true;
            }
          }
          if (this.tenObj && this.tenObj.playerType == "tc" && document.querySelector("#videoBox .tcplayer")) {
            if (document.querySelector("#videoBox .tcplayer").classList.contains('vjs-user-inactive')) {
              this.showProcessBar = false
            } else {
              this.showProcessBar = true
            }
          }
          let duration = ($this.tenObj.playerType == "xg" ? $this.tenObj.duration : $this.tenObj.duration()) || document.querySelector('video').duration;
          if (this.cfg && this.cfg.isAllowProgressBar == 0 &&
            (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) - playTime1 > 1 &&
            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio != 1 &&
            (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) > (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio * duration) &&
            !(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio != 1 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio != 0 && !this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess)
          ) {
            this.tenObj.playerType == "xg" ? (this.tenObj.currentTime = playTime1) : this.tenObj.currentTime(playTime1);
            this.$showCjToast({
              text: '该视频被限制快进，请学完后再试',
              type: "text",
            });
          }
          playTime1 = (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime());
          if ($this.courseList[index].hasPermission == true && $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio != 1 && $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio != 0 && !$this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].goProcess) {
            if (this.tenObj && (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration())) {
              // isNoVideo = true;
              $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].goProcess = true; //每课时只进来一次
              let curTime = 0;//Math.round($this.dataInfo.items[$this.currentIndex].curProgressRatio * duration);
              if (Number($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio == 1)) {
                curTime = Math.round($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio * duration);
              } else {
                curTime = Math.round($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio * duration);
              }
              $this.tenObj.playerType == "xg" ? ($this.tenObj.currentTime = curTime) : $this.tenObj.currentTime(curTime);
              playTime1 = curTime;
            }
          }
          if (this.tenObj && this.tenObj.playerType == "xg" && document.getElementById('videoBox') && document.getElementById('videoBox').className.indexOf('xgplayer-inactive') != -1) {
            this.showProcessBar = false;
          } else if (this.tenObj && this.tenObj.playerType == "xg") {
            this.showProcessBar = true;
          }
          // this.currentPlayTime = this.tenObj ? this.tenObj.currentTime : 0;
          curPlayTime = this.tenObj ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;

        })
        this.tenObj.on('seeking', (ev) => {
        })
        this.tenObj.on("ended", () => {
          playbackRateNow = this.tenObj.playbackRate();
          this.isOnPlaying = false;
          if ($this.courseList[index].hasPermission) {
            $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio = 1;
            // $this.dataInfo.items[$this.currentIndex].progressRatio = 1;
            if (Number($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio) != 1) {
              $this.lessonMemberLog($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].detailId, 0) //这个接口每个课时只访问一次
            }
            $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].progressRatio = 1;
            if ($this.courseList[$this.courseIndex].hasPermission && $this.tenObj && startSt != 0) {
              let currentTime = ($this.tenObj != null && $this.tenObj != '') ? ($this.tenObj.playerType == "xg" ? $this.tenObj.currentTime : $this.tenObj.currentTime()) : 0;
              endSt = new Date().getTime();
              playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
              // let videoDuration = ($this.tenObj != null && $this.tenObj != '') ? $this.tenObj.duration : 0;
              if (currentTime > 2 && playedDuration > 0.2) {
                  $this.setProgress($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].detailId, 1, 0, playedDuration);
                $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].curProgressRatio = 1;
                $this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex].goProcess = false;
              } else {
                startSt = 0;
                endSt = 0;
                playedDuration = 0;
              }
            }
          }
          //按顺序播放
          if (($this.courseList[index].hasPermission == true && $this.playType == 1)) {
            courseIndexTmp = $this.courseIndex;
            courseItemIndexTmp = $this.courseItemIndex;
            $this.searchNextVoice(0);
          } else if ($this.courseList[index].hasPermission == false) {
            if ($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex + 1]) {
              if ($this.courseList[$this.courseIndex].assets.items[$this.courseItemIndex + 1].isPreview == 1) {
                courseIndexTmp = $this.courseIndex;
                courseItemIndexTmp = $this.courseItemIndex;
                $this.searchNextVoice(0);
              } else {
                this.showTryEnd = true;
              }
            } else if (
              $this.courseList[$this.courseIndex + 1] &&
              $this.courseList[$this.courseIndex + 1].prodType == 110 &&
              $this.courseList[$this.courseIndex + 1].assets &&
              $this.courseList[$this.courseIndex + 1].assets.items[0] &&
              (
                !$this.courseList[$this.courseIndex + 1].hasPermission &&
                (($this.courseList[$this.courseIndex + 1].assets.items[0].watchPermission == 1 &&
                  ($this.courseList[$this.courseIndex + 1].assets.items[0].watchTime > 0 || $this.courseList[$this.courseIndex + 1].assets.items[0].watchTimeSeconds > 0) &&
                  $this.courseList[$this.courseIndex + 1].assets.items[0].isPreview == 1) ||
                ($this.courseList[$this.courseIndex + 1].assets.items[0].allowWholeWatch == 1 &&
                  $this.courseList[$this.courseIndex + 1].assets.items[0].isPreview == 1))
              )
            ) {
              courseIndexTmp = $this.courseIndex;
              courseItemIndexTmp = $this.courseItemIndex;
              $this.searchNextVoice(0);
            } else {
              this.showTryEnd = true;
            }
          }
        });
        this.tenObj.on(this.tenObj.playerType == 'xg' ? "requestCssFullscreen" : "fullscreenchange", () => {
          //延迟50ms，否则腾讯播放器真全屏全屏切回非全屏时(通过手机系统自带的返回键)，可能会没获取到正确的isFullscreen()
          setTimeout(() => {
            if (this.tenObj.playerType == 'xg' || (this.tenObj.playerType == 'tc' && this.tenObj.isFullscreen() && videoObj.isCssFullScreen)) {
              this.goInCssFull = true;
              if (!(this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf)) {
                return;
              }
              this.$nextTick(() => {
                let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
                if (!isMobile) {
                  this.videoWidth = document.querySelector("#videoBox").offsetWidth;
                  this.videoHeight = document.querySelector("#videoBox").offsetHeight;
                }
                document.querySelector(".clamp").style.width = this.videoWidth + 'px';
                document.querySelector(".clamp").style.height = this.videoHeight + 'px';
                document.querySelector(".clamp").style.left = 0;
                document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - this.videoHeight / 2) + 'px';
                this.tenObj.on('rotate', (deg) => {
                  if (deg == 90 && document.querySelector(".mlamp")) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);overflow-x:hidden;top:" + (document.querySelector("#videoBox").clientHeight / 2 - (document.querySelector(".mlamp").clientHeight / 2)) + "px;right:-" + ((document.querySelector("#videoBox").clientWidth / 2) + ((document.querySelector("#videoBox").clientHeight - document.querySelector("#videoBox").clientWidth) / 2) - (document.querySelector(".mlamp").clientHeight / 2)) + "px;" + ";width:" + document.querySelector("#videoBox").clientHeight + 'px;';
                  } else if (deg == 180 && document.querySelector(".mlamp")) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);bottom:0;left:0;";
                  } else if (deg == 270 && document.querySelector(".mlamp")) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);overflow-x:hidden;bottom:" + (document.querySelector("#videoBox").clientHeight / 2 - (document.querySelector(".mlamp").clientHeight / 2)) + "px;left:-" + ((document.querySelector("#videoBox").clientWidth / 2) + ((document.querySelector("#videoBox").clientHeight - document.querySelector("#videoBox").clientWidth) / 2) - (document.querySelector(".mlamp").clientHeight / 2)) + "px;" + ";width:" + document.querySelector("#videoBox").clientHeight + 'px;';
                  } else if (document.querySelector(".mlamp")) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);top:0;left:0;";
                  }
                  if (document.querySelector(".clamp")) {
                    document.querySelector(".clamp").style.transform = "rotate(" + deg + "deg) scale(1)";
                    if (deg == 90 || deg == 270) {
                      document.querySelector(".clamp").style.width = document.querySelector("#videoBox").clientHeight + 'px';
                      document.querySelector(".clamp").style.height = document.querySelector("#videoBox").clientWidth + 'px';
                      document.querySelector(".clamp").style.left = (document.querySelector("#videoBox").clientWidth / 2 - document.querySelector("#videoBox").clientHeight / 2) + 'px';
                      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - document.querySelector("#videoBox").clientWidth / 2) + 'px';
                    } else {
                      document.querySelector(".clamp").style.width = this.videoWidth + 'px';
                      document.querySelector(".clamp").style.height = this.videoHeight + 'px';
                      document.querySelector(".clamp").style.left = 0;
                      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - this.videoHeight / 2) + 'px';
                    }
                  }
                });
              })
            } else if (this.tenObj.playerType == 'tc' && !this.tenObj.isFullscreen() && videoObj.isCssFullScreen) {
              this.toExitCssFullScreen();
            }
          }, 50);
        });
        this.tenObj.on("exitCssFullscreen", () => {
           this.toExitCssFullScreen();
        });
        this.tenObj.on("error", (e) => {
          this.showProcessBar = true;
        });
        this.tenObj.on("controlShow", (e) => {
          this.showProcessBar = true;
        });
        utilJs.audioPlayFun(this.tenObj);
        this.randomClamp();
      } else if (
          !this.courseList[index].hasPermission &&
          (this.courseList[index].assets.items[sIndex].watchPermission == 1 &&
          (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0) &&
          this.courseList[index].assets.items[sIndex].isPreview == 1)
        ) {
        if (this.tenObj) {
          this.tenObj.pause();
          this.destroyPlayer();
          this.tenObj = null;
        }
        if (document.querySelector("#videoBox") != undefined && document.querySelector("#videoBox").innerHTML != null) {
          document.querySelector("#videoBox").innerHTML = "";
        }
        if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf) {
          document.querySelector("#videoBox").innerHTML = this.getMarqueConf();
        }
        if (document.querySelector("#boxInfo") != undefined && document.querySelector("#boxInfo").innerHTML != null) {
          document.querySelector("#boxInfo").innerHTML = '';
        }
        // this.vtShow = false;
        let u = navigator.userAgent;
        let isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//andrio终端
        // let mobile = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl == '' || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl == null) {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url;
        }
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url == '' || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url == null) {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
        }
        // if (isMobile) {
        if (isChangeUrl == 1) {
          isChange = !isChange
          if (isChange) {
            this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url
          } else {
            this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
          }
        } else {
          this.tenData.vuValue = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl;
        }

        // } else {
        //   this.tenData.vuValue = /macintosh|mac os x/i.test(navigator.userAgent) ? this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl : this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoMp4Url;

        //   //走腾讯云的域名，http换成https
        //   this.tenData.vuValue = this.tenData.vuValue.replace("http://", "https://");
        // }
        this.tenData.onlineLogo = this.courseList[this.courseIndex].courseAvatar;
        // let $this = this;
        let videoObj = {
          videoMp4: this.tenData.vuValue,
          videoM3U8: this.tenData.vuValue, //isChangeUrl == 1 ? this.tenData.vuValue : this.courseList[this.courseIndex].assets.items[this.courseItemIndex].videoUrl,
          autoplay: true,
          fluid: false,
          isCssFullScreen: true,
          poster: '',
          marqueConf: this.getMarqueConf(),
          rotateScreenToggle: true, //是否开启伪全屏的旋转按钮
          playerCtx: this, //当前播放器的上下文
          isPlaybackRate: this.cfg.speedPlay == 1 ? false : true,
          allowFastForward: true,
          rotateVideoCB() { //视频旋转回调（具体业务这里处理，this指向当前上下文）
            this.tcRotateVideo();
          },
          recoverRotateVideoCB() { //视频旋转恢复回调函数（具体业务这里处理，this指向当前上下文）
            this.tcRecoverRotateVideo();
          },
          fastRewindCB() {
            this.clickFastRewindCB();
          },
          fastForwardCB() {
            this.clickFastForwardCB();
          }
        }
        this.tenObj = getXgplayer('videoBox', videoObj);
        this.$nextTick(function () {
          this.videoWidth = document.querySelector("#videoBox").offsetWidth;
          this.videoHeight = document.querySelector("#videoBox").offsetHeight;
        })
        this.tenObj.on("timeupdate", (ev) => {
          let tryWatchTime = this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTime * 60 + (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds ? Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds) : 0);
          if ((this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) > tryWatchTime) {
            if (!isMobile || isAnd) {
              this.tenObj.pause();
            }
            if (this.tenObj.playerType == "tc" && this.tenObj.isFullscreen()) {
              this.tenObj.exitFullscreen();
            }
            this.destroyPlayer();
            this.$nextTick(() => {
              this.hasClickPlay = false;
            })
            this.showTryEnd = true;
          }
          if (this.tenObj && this.tenObj.playerType == "tc" && document.querySelector("#videoBox .tcplayer")) {
            if (document.querySelector("#videoBox .tcplayer").classList.contains('vjs-user-inactive')) {
              this.showProcessBar = false
            } else {
              this.showProcessBar = true
            }
          }
          if (this.tenObj && this.tenObj.playerType == "xg" && document.getElementById('videoBox') && document.getElementById('videoBox').className.indexOf('xgplayer-inactive') != -1) {
            this.showProcessBar = false;
          } else if (this.tenObj && this.tenObj.playerType == "xg") {
            this.showProcessBar = true;
          }
        })
        this.tenObj.on("play", () => {
          this.isOnPlaying = true;
        });
        this.tenObj.on("pause", () => {
          this.isOnPlaying = false;
        });
        this.tenObj.on("ended", () => {
          this.isOnPlaying = false;
          //按顺序播放
          if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex + 1]) {
            if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex + 1].isPreview == 1) {
              courseIndexTmp = this.courseIndex;
              courseItemIndexTmp = this.courseItemIndex;
              this.searchNextVoice(0);
            } else {
              this.showTryEnd = true;
            }
          } else if (
            this.courseList[this.courseIndex + 1] &&
            this.courseList[this.courseIndex + 1].prodType == 110 &&
            this.courseList[this.courseIndex + 1].assets &&
            this.courseList[this.courseIndex + 1].assets.items[0] &&
            (
              !this.courseList[this.courseIndex + 1].hasPermission &&
              ((this.courseList[this.courseIndex + 1].assets.items[0].watchPermission == 1 &&
                (this.courseList[this.courseIndex + 1].assets.items[0].watchTime > 0 || this.courseList[this.courseIndex + 1].assets.items[0].watchTimeSeconds > 0) &&
                this.courseList[this.courseIndex + 1].assets.items[0].isPreview == 1) ||
              (this.courseList[this.courseIndex + 1].assets.items[0].allowWholeWatch == 1 &&
                this.courseList[this.courseIndex + 1].assets.items[0].isPreview == 1))
            )
          ) {
            courseIndexTmp = this.courseIndex;
            courseItemIndexTmp = this.courseItemIndex;
            this.searchNextVoice(0);
          } else {
            this.showTryEnd = true;
          }
        });
        this.tenObj.on(this.tenObj.playerType == 'xg' ? "requestCssFullscreen" : "fullscreenchange", () => {
          setTimeout(() => {
            if (this.tenObj.playerType == 'xg' || (this.tenObj.playerType == 'tc' && this.tenObj.isFullscreen() && videoObj.isCssFullScreen)) {
              this.goInCssFull = true;
              if (!(this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf)) {
                return;
              }
              this.$nextTick(() => {
                let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
                if (!isMobile) {
                  this.videoWidth = document.querySelector("#videoBox").offsetWidth;
                  this.videoHeight = document.querySelector("#videoBox").offsetHeight;
                }
                document.querySelector(".clamp").style.width = this.videoWidth + 'px';
                document.querySelector(".clamp").style.height = this.videoHeight + 'px';
                document.querySelector(".clamp").style.left = 0;
                document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - this.videoHeight / 2) + 'px';
                this.tenObj.on('rotate', (deg) => {
                  if (deg == 90) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);right:-46%;";
                  } else if (deg == 180) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);bottom:0;left:0;";
                  } else if (deg == 270) {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);left:-46%;";
                  } else {
                    document.querySelector(".mlamp").style = "transform: rotate(" + deg + "deg) scale(1);top:0;left:0;";
                  }
                  if (document.querySelector(".clamp")) {
                    document.querySelector(".clamp").style.transform = "rotate(" + deg + "deg) scale(1)";
                    if (deg == 90 || deg == 270) {
                      document.querySelector(".clamp").style.width = document.querySelector("#videoBox").clientHeight + 'px';
                      document.querySelector(".clamp").style.height = document.querySelector("#videoBox").clientWidth + 'px';
                      document.querySelector(".clamp").style.left = (document.querySelector("#videoBox").clientWidth / 2 - document.querySelector("#videoBox").clientHeight / 2) + 'px';
                      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - document.querySelector("#videoBox").clientWidth / 2) + 'px';
                    } else {
                      document.querySelector(".clamp").style.width = this.videoWidth + 'px';
                      document.querySelector(".clamp").style.height = this.videoHeight + 'px';
                      document.querySelector(".clamp").style.left = 0;
                      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - this.videoHeight / 2) + 'px';
                    }
                  }
                });
              })
            } else if (this.tenObj.playerType == 'tc' && !this.tenObj.isFullscreen() && videoObj.isCssFullScreen) {
              this.toExitCssFullScreen();
            }
          }, 50);
        });
        this.tenObj.on("exitCssFullscreen", () => {
          this.toExitCssFullScreen();
        });
        this.tenObj.on("error", (e) => {
          this.showProcessBar = true;
        });
        this.tenObj.on("controlShow", (e) => {
          this.showProcessBar = true;
        });
        utilJs.audioPlayFun(this.tenObj);
        this.randomClamp();
      } else {
        this.clickBuyNow();
      }
    },
    clickFastRewindCB() {
      let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
      if (this.tenObj.playerType == "xg") {
        this.tenObj.currentTime = (currentTime - 15) > 0 ? (currentTime - 15) : 0;
      } else {
        this.tenObj.currentTime((currentTime - 15) > 0 ? (currentTime - 15) : 0);
      }
    },
    clickFastForwardCB() {
      if (this.cfg && this.cfg.isAllowProgressBar == 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio != 1) {
        this.$showCjToast({
          text: '该视频被限制快进，请学完后再试',
          type: "text",
        });
        return;
      }
      let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
      let videoDuration = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration()) : 0;
      if (this.tenObj.playerType == "xg") {
        this.tenObj.currentTime = (currentTime + 15) > videoDuration ? videoDuration : (currentTime + 15);
      } else {
        this.tenObj.currentTime((currentTime + 15) > videoDuration ? videoDuration : (currentTime + 15));
      }
    },
    randomClamp() {
      if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf && this.carouselType == 1 && this.placeType == 5) {
        let clampElement = document.querySelector(".clamp-text");
        clampElement.addEventListener('animationiteration', () => {
          this.clampTranslateY = Math.floor(Math.random() * 92) + 8; //8~100随机数。小于8会和版权重叠
          clampElement.style.transform = "translateY(-" + this.clampTranslateY + "%)";
          clampElement.style.top = this.clampTranslateY + "%";
        });
      }
    },
    tcRotateVideo() {
      this.screenStatus = 3;
      if (!(this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf)) {
        return;
      }
      document.querySelector(".mlamp").style = "transform: rotate(90deg) scale(1);overflow-x:hidden;top:" + (document.querySelector("#videoBox").clientHeight / 2 - (document.querySelector(".mlamp").clientHeight / 2)) + "px;right:-" + ((document.querySelector("#videoBox").clientWidth / 2) + ((document.querySelector("#videoBox").clientHeight - document.querySelector("#videoBox").clientWidth) / 2) - (document.querySelector(".mlamp").clientHeight / 2)) + "px;" + ";width:" + document.querySelector("#videoBox").clientHeight + 'px;';
      document.querySelector(".clamp").style.transform = "rotate(90deg) scale(1)";
      document.querySelector(".clamp").style.width = document.querySelector("#videoBox").clientHeight + 'px';
      document.querySelector(".clamp").style.height = document.querySelector("#videoBox").clientWidth + 'px';
      document.querySelector(".clamp").style.left = (document.querySelector("#videoBox").clientWidth / 2 - document.querySelector("#videoBox").clientHeight / 2) + 'px';
      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - document.querySelector("#videoBox").clientWidth / 2) + 'px';
    },
    tcRecoverRotateVideo() {
      this.screenStatus = 2;
      if (!(this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf)) {
        return;
      }
      document.querySelector(".mlamp").style = "transform: rotate(0deg) scale(1);top:0;left:0;";
      document.querySelector(".clamp").style.transform = "rotate(0deg) scale(1)";
      document.querySelector(".clamp").style.width = this.videoWidth + 'px';
      document.querySelector(".clamp").style.height = this.videoHeight + 'px';
      document.querySelector(".clamp").style.left = 0;
      document.querySelector(".clamp").style.top = (document.querySelector("#videoBox").clientHeight / 2 - this.videoHeight / 2) + 'px';
    },
    playNextVideo(index, sIndex) {
      if (!this.distributionId && this.dataInfo.hasPermission) {
        let itemIndex = this.courseList[index].prevPage ? this.courseList[index].prevPage * 20 + sIndex : sIndex;
        this.setCourseProgress(index, itemIndex)
        this.setCourseMemberLog(index)
        this.courseIndex = index;
        this.courseItemIndex = sIndex;
      }
      if (
        (this.courseList[index].hasPermission ||
        (this.courseList[index].assets.items[sIndex].watchPermission == 1 &&
          (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0) &&
          this.courseList[index].assets.items[sIndex].isPreview == 1) ||
        (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1 &&
          this.courseList[index].assets.items[sIndex].isPreview == 1)) &&
        this.playType == 1 &&
        this.tenObj
      ) {
        this.courseIndex = index;
        this.courseItemIndex = sIndex;
        // if (pageStatus == 'hidden') {
        //   return;
        // }
        // let u = navigator.userAgent;
        // let isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//andrio终端
        // let mobile = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // let isMobile = !!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
        if (this.tenObj.playerType == 'tc') {
          try { // 判断是不是以http开头的链接地址，如果不是就转成json对象，如果转换失败，那么还是按字符串走
            if (this.courseList[index].assets.items[sIndex].videoMp4Url) this.courseList[index].assets.items[sIndex].videoMp4Url = this.courseList[index].assets.items[sIndex].videoMp4Url.indexOf("https://") == 0 || this.courseList[index].assets.items[sIndex].videoMp4Url.indexOf("http://") == 0 ? this.courseList[index].assets.items[sIndex].videoMp4Url : JSON.parse(this.courseList[index].assets.items[sIndex].videoMp4Url);
            if (this.courseList[index].assets.items[sIndex].videoUrl) this.courseList[index].assets.items[sIndex].videoUrl = this.courseList[index].assets.items[sIndex].videoUrl.indexOf("https://") == 0 || this.courseList[index].assets.items[sIndex].videoUrl.indexOf("http://") == 0 ? this.courseList[index].assets.items[sIndex].videoUrl : JSON.parse(this.courseList[index].assets.items[sIndex].videoUrl);
          } catch (error) {
            console.log("不是json格式的话，那么就还走字符串的形式");
          }
          if ((typeof this.courseList[index].assets.items[sIndex].videoMp4Url == "object") || (typeof this.courseList[index].assets.items[sIndex].videoUrl == "object")) {
            if (this.courseList[index].assets.items[sIndex].videoMp4Url && this.courseList[index].assets.items[sIndex].videoMp4Url.fileID && this.courseList[index].assets.items[sIndex].videoMp4Url.fileID.length > 0 && this.courseList[index].assets.items[sIndex].videoMp4Url.appID) {
              let tcApppId = this.courseList[index].assets.items[sIndex].videoMp4Url.appID
              let tcFileID = this.courseList[index].assets.items[sIndex].videoMp4Url.fileID
              let tcPsign = this.courseList[index].assets.items[sIndex].videoMp4Url.psign
              this.tenObj.loadVideoByID({
                appID: tcApppId,
                fileID: tcFileID,
                psign: tcPsign,
              })
            } else if (this.courseList[index].assets.items[sIndex].videoUrl && this.courseList[index].assets.items[sIndex].videoUrl.fileID && this.courseList[index].assets.items[sIndex].videoUrl.fileID.length > 0 && this.courseList[index].assets.items[sIndex].videoUrl.appID) {
              let tcApppId = this.courseList[index].assets.items[sIndex].videoUrl.appID
              let tcFileID = this.courseList[index].assets.items[sIndex].videoUrl.fileID
              let tcPsign = this.courseList[index].assets.items[sIndex].videoUrl.psign

              this.tenObj.loadVideoByID({
                appID: tcApppId,
                fileID: tcFileID,
                psign: tcPsign,
              })
            }
            setTimeout(() => {
              utilJs.audioPlayFun(this.tenObj);
              this.tenObj.playbackRate(playbackRateNow)
            }, 300);
          } else if ((this.courseList[index].assets.items[sIndex].videoUrl && (this.courseList[index].assets.items[sIndex].videoUrl.indexOf('http://') == 0 || this.courseList[index].assets.items[sIndex].videoUrl.indexOf('https://') == 0)) || (this.courseList[index].assets.items[sIndex].videoMp4Url && (this.courseList[index].assets.items[sIndex].videoMp4Url.indexOf('http://') == 0 || this.courseList[index].assets.items[sIndex].videoMp4Url.indexOf('https://') == 0))) {
            let nurl = "";
            // if (isMobile) {
            //   if (mobile) {
            //     nurl = this.courseList[index].assets.items[sIndex].videoUrl ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
            //   } else {
            //     nurl = this.courseList[index].assets.items[sIndex].videoMp4Url ? this.courseList[index].assets.items[sIndex].videoMp4Url : this.courseList[index].assets.items[sIndex].videoUrl;
            //   }
            //   this.tenData.vuValue = mobile ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
            // } else {
              nurl = this.courseList[index].assets.items[sIndex].videoUrl ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
            // }
            nurl = nurl.indexOf("http://") != -1 ? nurl.replace("http://", "https://") : nurl;
            this.tenData.vuValue = nurl;
            this.tenObj.src(nurl);
            setTimeout(() => {
              utilJs.audioPlayFun(this.tenObj);
              this.tenObj.playbackRate(playbackRateNow)
            }, 200);
          }
        } else {
          let nurl = "";
          // if (isMobile) {
          //   if (mobile) {
          //     nurl = this.courseList[index].assets.items[sIndex].videoUrl ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
          //   } else {
          //     if (this.tenObj.src.indexOf(".mp4") > -1) {
          //       nurl = this.courseList[index].assets.items[sIndex].videoMp4Url ? this.courseList[index].assets.items[sIndex].videoMp4Url : this.courseList[index].assets.items[sIndex].videoUrl;
          //     } else {
          //       nurl = this.courseList[index].assets.items[sIndex].videoUrl ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
          //     }
          //   }
          //   this.tenData.vuValue = mobile ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
          // } else {
            nurl = this.courseList[index].assets.items[sIndex].videoUrl ? this.courseList[index].assets.items[sIndex].videoUrl : this.courseList[index].assets.items[sIndex].videoMp4Url;
          // }
          nurl = nurl.indexOf("http://") != -1 ? nurl.replace("http://", "https://") : nurl;
          this.tenData.vuValue = nurl;
          this.tenObj.src = nurl;
          utilJs.audioPlayFun(this.tenObj);
        }
      }
    },
    startPlay(playStatus) {
      this.isOnPlaying = true;
      this.playStatus = playStatus;
      if (this.dataInfo.hasPermission == true) {
        // startSt = new Date().getTime();
        if (!this.distributionId) {
          let itemIndex = this.courseList[this.courseIndex].prevPage ? this.courseList[this.courseIndex].prevPage * 20 + this.courseItemIndex : this.courseItemIndex;
          this.setCourseProgress(this.courseIndex, itemIndex);
          this.setCourseMemberLog(this.courseIndex)
          startSt = new Date().getTime();
        }
      }
    },
    onPlayTimeChange(playTime, allTime) {
      curPlayTime = playTime;
      this.timePercent = totalTime > 0 ? (curPlayTime / totalTime) * 100 : 0;
    },
    //上一节
    clickBefor() {
      this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
      courseIndexTmp = this.courseIndex;
      courseItemIndexTmp = this.courseItemIndex;
      this.searchBeforeVoice(this.isVideoToAudio ? 0 : 1);
    },
    //下一节
    clickAfter() {
      this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = false;
      courseIndexTmp = this.courseIndex;
      courseItemIndexTmp = this.courseItemIndex;
      this.searchNextVoice(this.isVideoToAudio ? 0 : 1);
    },
    showFollowQr() {
      if (!this.qrImg) {
        this.getQrImg();
      } else {
        this.freeWatch = true;
      }
    },
    changePsw() {
      this.noticeText = "";
    },
    //提交密码
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "common/verifyEncrypt", {
        encrypt: inputPwd,
        prodType: global.ckFrom.column,
        id: this.extId
      }, res => {
        isClick = false;
        if (res.code == 500) {
          this.noticeText = "*密码错误";
        } else if (res.code == 200) {
          this.showPassword = false;
          this.is_page = false;
          this.page = 1;
          this.limit = 10;
          this.courseList = [];
          this.getColumnDetail(1)
        }
      },
        failRes => {
          isClick = false;
        }
      );
    },
    inputPsw() {
      let pId = this.ckFrom == this.cfrom.flashSalesColumn ? this.dataInfo.sales.pId : null;
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind && utilJs.goBindMobile()) {
        let pathQuery = {
          cId: this.cId,
          extId: this.extId,
          ckFrom: this.distribution ? global.ckFrom.distributionColumnPay : this.ckFrom,
          isFromInvite: 0,
          isGoPay: false,
          recRelateId: this.recRelateId,
          recType: this.recType
        };
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (this.ckFrom == this.cfrom.flashSalesColumn) {
          pathQuery.pId = pId;
        }
        utilJs.goBindMobile(pathQuery);
        return;
      }
      this.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : (this.ckFrom == this.cfrom.flashSalesColumn ? this.cfrom.flashSalesColumn : this.cfrom.column);
      // 有关联表单，则跳到报名表单处
      if (this.dataInfo.collectPage != 3 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm('');
      } else {
        this.showTryEnd = false
        this.noticeText = "";
        this.showPassword = true;
      }
    },
    //购买信息
    buyedInfoSwiper() {
      let that = this
      utilJs.getMethod(`${global.apiurl}common/buyedInfoSwiper?prodId=${that.extId}&prodType=${global.ckFrom.column}`, function (res) {
        that.swiperList = res
      }, failRes => {
      });
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.dataInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    // 砍价跳转
    handleClickBargainDetail(bargainId) {
      if (this.dataInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'text'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          return;
        }
        this.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : (this.ckFrom == this.cfrom.flashSalesColumn ? this.cfrom.flashSalesColumn : this.cfrom.column);
        // 有关联表单，则跳到报名表单处
        if (this.dataInfo.collectPage == 1 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm(bargainId);
        } else {
          if (this.dataInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    getBelong(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        if (tabType == 1) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=4&proId=' + this.extId + '&page=' + this.pagePackage + '&limit=' + this.limit + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongPackageList = res.list.combos.data ? $this.belongPackageList.concat(res.list.combos.data) : [];
            if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
              $this.belongColumnList = res.list.columns.data;
            }
            $this.pagePackage = res.list.combos.current_page < res.list.combos.last_page ? ($this.pagePackage + 1) : $this.pagePackage;
            $this.is_page_package = res.list.combos.current_page < res.list.combos.last_page ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 2) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=4&proId=' + this.extId + '&page=' + this.pageColumn + '&limit=' + this.limit + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongColumnList = $this.belongColumnList.concat(res.list.columns.data);
            $this.pageColumn = res.list.columns.current_page < res.list.columns.last_page ? ($this.pageColumn + 1) : $this.pageColumn;
            $this.is_page_column = res.list.columns.current_page < res.list.columns.last_page ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        }
      }
    },
    getMore(tType) {
      this.getBelong(tType)
    },
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    //分享回调领取积分(非每日任务只能领取一次)
    shareGetIntegration: function () {
      if ((this.companyAuth.enableShareColumnPoint != 1 && this.companyAuth.pointModel == 1) || (this.companyAuth.enableShareColumn != 1 && this.companyAuth.pointModel == 2)) {
        return;
      }
      let $this = this;
      //积分来源 1. 分享视频，2：观看视频，3：分享音频，4：观看音频，14：分享文章 51：分享知识套餐 52：分享专刊 53：分享直播 54：观看直播 55：绑定手机 56：分享课程（每日） 57：分享知识套餐（每日） 58：分享专栏59：分享直播 60：观看课程（次数）61：观看直播（次数）62：阅读图文时长 63：视听学习时长 64：直播学习时长
      let data = {
        cId: -1,
        extId: this.extId,
        pointFrom: this.companyAuth.pointModel == 1 ? 52 : 58,
        duration: -1
      };
      utilJs.postMethod(`${global.apiurl}common/getPoints`, data, function (
        res
      ) {
        let integrateCount = res.points;
        if (integrateCount > 0) {
          $this.integrateCount = integrateCount;
          $this.showIntegrate = true;
        }
      });
    },
    // 获取搭配学习列表
    getRelatedList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getMainList?prodType=9&prodId=${this.extId}`, (res) => {
        if (res.matchList && res.matchList.length > 0) {
          this.relatedList = [...this.relatedList, ...res.matchList];
        }
        if (!this.$isStore() && this.styleType == 2 && ((this.relatedList && this.relatedList.length > 0) || (this.dataInfo && this.dataInfo.circleList && this.dataInfo.circleList.length > 0)) && this.dataInfo.hasPermission) {
          this.tabList.splice(2, 0, {
            title: '互动',
            index: 2,
          })
        }
      });
    },
    clickBuyPresent() {
      this.isShowPresent = true;
      this.clickBuyNow();
    },
    //点击搭配学习
    goRevlantDetail(type, id) {
      let toPath = '';
      // 10社群 41打卡
      if (type == 10) {
        toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${id}`;
      } else if (type == 9) {
        toPath = `/homePage/clockIn/clockInDetail?clockInId=${id}`;
      } else if (type == 125) {
        toPath = `/homePage/testPaper/testDetail?testId=${id}&origin=${global.ckFrom.column}&prodId=${this.extId}`
      } else if (type == 11) {
        toPath = `/homePage/examination/examinationDetail?ExaminationNo=${id}`
      } else if (type == 129) {
        toPath = `/homePage/itemBank/questionSaleDetail?libraryId=${id}`
      } else if (type == 75) {
        toPath = `/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${id}`
      } else if (type == 77) {
        toPath = `/homePage/voiceTest/voiceTestDetail?paperMainId=${id}`
      }
      this.$routerGo(this, "push", { path: toPath });
    },
    showCL() {
      document.getElementById("modelCourseList").addEventListener('scroll', this.handleScroll);
    },
    clickPopCourseList() {
      if (!this.dataInfo.hasPermission) {
        return;
      }
      this.showCouseList = true;
      this.showCL();
      this.$nextTick(function () {
        setTimeout(() => {
          document.getElementById("modelCourseList").scrollTop = 0
        }, 200)
      })
    },
    clickAllCourse() {
      this.indexAll = -1;
      this.showAllCourse = true;
      this.courseList = this.courseListAll;
      for (let k = 0; k < this.courseList.length; k++) {
        if (this.courseList[k].courseType == 1 && this.courseList[k].assets) {
          for (let j = 0; j < this.courseList[k].assets.items.length; j++) {
            this.courseList[k].assets.items[j].isPlaying = false;
          }
        }
      }
      this.$forceUpdate();
      this.audioPause();
      this.courseIndex = 0;
      this.courseItemIndex = 0;
      this.showCouseList = false;
    },
    clickColumnCourse(cIndex, courseNo, courseType) {
      // if (this.courseListAll[cIndex].courseType == 1 && this.courseListAll[cIndex].assets) {
      // if (this.courseListAll[this.courseIndex].assets.items[this.courseItemIndex].isPlaying) {
      //   this.courseListAll[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
      //   this.$forceUpdate();
      //   this.audioPause();
      //   // document.getElementById('audioPlayer').src = "";
      //   this.courseIndex = 0;
      //   this.courseItemIndex = 0;
      // }
      this.indexAll = cIndex;
      this.showAllCourse = false;
      // this.courseList = [this.courseListAll[cIndex]];
      for (let k = 0; k < this.courseList.length; k++) {
        if (this.courseList[k].courseType == 1 && this.courseList[k].assets) {
          for (let j = 0; j < this.courseList[k].assets.items.length; j++) {
            this.courseList[k].assets.items[j].isPlaying = false;
          }
        }
      }
      this.$set(this.courseList[cIndex], 'show', true);
      this.$forceUpdate();
      this.audioPause();
      this.courseIndex = cIndex;
      this.courseItemIndex = 0;
      // this.$forceUpdate();
      // } else {
      //   this.clickCourseItem(courseNo, courseType)
      // }
      this.showCouseList = false;
    },
    audioError(e) {
      if (!document.getElementById('audioPlayer')) {
        return;
      }
      console.log("audioError****");
      console.log(e);
      console.log(document.getElementById('audioPlayer').src);
      console.log(document.getElementById('audioPlayer').currentTime);
      console.log("audioErrorEND****");
      // if (isPlaySuccess == 1) {
      //   return;
      // }
      if (IS_IOS && document.getElementById('audioPlayer').src == this.audioM3u8Src) {
        //获取当前的播放时间，防止播放失败的时候可以回到现在的时间
        if (IS_IOS && document.getElementById('audioPlayer') && document.getElementById('audioPlayer').currentTime > 0) {
          this.audioPlayTime = document.getElementById('audioPlayer').currentTime;
        }
        this.playAudioHls(this.audioMp3Src);
      } else if (!IS_IOS && document.getElementById('audioPlayer').src == this.audioMp3Src) {
        this.playAudioHls(this.audioM3u8Src);
      }
    },
    //使用hls播放
    playAudioHls(src) {
      let audio = document.getElementById('audioPlayer');
      let audioSource = document.getElementById('audioSource1');
      // HLS support ios直播播放m3u8 安卓使用hls播放
      if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        audioSource.src = src;
        audio.src = src;
        audio.load();
        this.audioPlay();
      } else {
        console.log("不支持支持播放m3u8");
        try {
          if (Hls.isSupported()) {
            if (!this.hls) {
              this.hls = new Hls();
            }
            this.hls.loadSource(src);
            this.hls.attachMedia(audio);
            this.audioPlay();
          } else {
            console.log("HLS is not supported on your browser");
            audioSource.src = src;
            audio.src = src;
            audio.load();
            this.audioPlay();
          }
        } catch (e) {
          console.log("hls.js is required to support m3u8");
          audioSource.src = src;
          audio.src = src;
          audio.load();
          this.audioPlay();
        }
      }
    },
    audioPlay(e) {
      console.log("audioPlay------");
      // hasSetTime = true;
      utilJs.audioPlayFun(document.getElementById('audioPlayer'));
      //document.getElementById('audioPlayer').play();
    },
    audioPause(playStatus) {
      this.isOnPlaying = false;
      this.playStatus = playStatus;
      if (this.courseList[this.courseIndex].hasPermission == true && startSt != 0) {
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
          let progress = Number(curPlayTime / totalTime).toFixed(2);
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
          this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
        } else {
          startSt = 0;
          endSt = 0;
          playedDuration = 0;
        }
      }
    },
    audioTimeUpdate() {
      if (this.courseList[this.courseIndex] && !this.courseList[this.courseIndex].hasPermission && this.courseIndex == 1 && this.watchTime && document.getElementById('audioPlayer') && document.getElementById('audioPlayer').currentTime > this.watchTime * 60) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.$forceUpdate();
        // document.getElementById('audioPlayer').currentTime = this.audioPlayTime;
        this.audioPause();
        courseIndexTmp = this.courseIndex;
        courseItemIndexTmp = this.courseItemIndex;
        this.searchNextVoice(this.isVideoToAudio ? 0 : 1);
      }
    },
    audioCanplay(duration) {
      // if (this.courseList[this.courseIndex].hasPermission) {
      //   startSt = new Date().getTime();
      // }
      totalTime = duration;
      if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) != 1 && Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) != 0 && this.courseList[this.courseIndex].hasPermission) {
        // hasSetTime = false;
        this.audioPlayTime = Math.floor(Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) * totalTime);
        // document.getElementById('audioPlayer').currentTime = this.audioPlayTime;
      }
      this.longestTime = Math.floor(Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) * totalTime);
    },
    //专栏详情中播放课程，时长也要累计到对应课程里
    setCourseMemberLog(index) {
      let data = {
        prodId: this.courseList[index].prodId,
        prodType: this.courseList[index].prodType,
        columnPermission: 1
      };
      let postUrl = `${global.apiurl}analysis/course/memberLog`;
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    //记录课时学完的学员（仅调用一次）
    lessonMemberLog(detailId, prodType) {
      let data = {
        prodId: detailId,
        prodType: prodType == 0 || this.isVideoToAudio ? 110 : 111,
        cId: this.courseList[this.courseIndex].courseId,
        nickname: localStorage.getItem('userName') ? localStorage.getItem('userName') : ''
      }
      let postUrl = `${global.apiurl}analysis/course/lesson/memberLog`;
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    //记录当前播放到哪一节
    setCourseProgress(index, sIndex) {
      let data = {
        prodId: this.extId, //this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId,
        prodType: 9,
        cType: 1,
        page: Math.floor(index / 10) + 1,
        outIndex: index % 10,
        innerIndex: sIndex
      };
      // let postUrl = `${global.apiurl}column/${this.extId}/progress`;
      let postUrl = `${global.apiurl}analysis/course/positionLog`;
      let $this = this
      utilJs.postMethod(postUrl, data, res => {
        $this.hasLearned = true;
        $this.hasListen = true;
        $this.hasSharePosition = false;
        $this.goToLast = false;
        $this.goToLast1 = false;
      });
    },
    //记录播放进度
    setProgress: function (detailId, progress, courseType, playedTime) {
      let data = {
        prodId: detailId,
        prodType: courseType == 0 ? 110 : 111,
        cId: this.courseList[this.courseIndex].courseId,
        cType: this.distributionId ? 103 : 5,
        progress: progress, //完成进度
        duration: playedTime > 0 ? playedTime : 0,
        startTime: startSt,
        endTime: endSt
      }
      // let postUrl = `${global.apiurl}courses/${this.courseList[this.courseIndex].courseId}/progress`;
      let postUrl = `${global.apiurl}analysis/course/progressLog`;
      // if (this.distributionId) {
      //   postUrl = `${global.apiurl}distributionMarkets/${this.distributionId}/subs/${this.courseList[this.courseIndex].courseId}/progress`;
      // }
      this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
      startSt = 0
      endSt = 0;
      playedDuration = 0;
      utilJs.postMethod(postUrl, data, res => {
        this.judgeCompliance()
      });
    },
    handleClickCertificate() {
      this.$refs.learnCerCom.drawNow('', this.extId, global.ckFrom.column)
    },
    judgeCompliance() {
      let postUrl = `${global.apiurl}Certificate/judgeCompliance?prodType=${global.ckFrom.column}&prodId=${this.extId}`;
      // enableStudyCard	number
      // 是否有设置学习证书1=是；0=否
      // isReceivedStudy	number
      // 是否已经领取了证书：1=是；0=否
      // isComplianceStudy	number
      // 是否达到学习证书发放条件：1=是；0否
      // studyHonorImage	string
      // 学习证书图片（如果领取了会有图片）
      // enableBuyCard	number
      // 是否有设置入学证书1=是；0=否
      // isReceivedBuy	number
      // 是否已经领取了入学证书：1=是；0=否
      // isComplianceBuy	number
      // 是否达到入学证书发放条件：1=是；0否
      // buyHonorImage	string
      // 入学证书证书图片（如果领取了会有图片）
      utilJs.getMethod(postUrl, res => {
        if (res.studyHonorImage || (res.enableStudyCard == 1 && res.isComplianceStudy == 1)) {
          this.showStudyCard = true
          this.isReceivedStudy = res.isReceivedStudy
          // this.$resf.learnCer.drawNow('', this.courseId, global.ckFrom.imgText,res.isReceivedStudy)
        }
        if (res.enableBuyCard == 1 && res.isComplianceBuy == 1 && res.isReceivedBuy == 0) {
          this.isReceivedBuy = res.isReceivedBuy
          let enrolCerLoca = global.ckFrom.column + '-' + this.extId
          if (JSON.parse(localStorage.getItem("enrolCer")) == enrolCerLoca) {
              return
          } else {
            this.$refs.enrolcerCom.drawNow('', this.extId, global.ckFrom.column)
          }
        }
      });
    },
    audioPlayEnd(pageStatus) {
      // this.audioPlayEnd = false;
      if (
        !this.courseList[this.courseIndex].hasPermission &&
        ((this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchPermission == 1 &&
          (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTime > 0 || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds > 0) &&
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPreview == 1) ||
        (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].allowWholeWatch == 1 &&
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPreview == 1))
      ) {
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex + 1]) {
          if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex + 1].isPreview == 1) {
            courseIndexTmp = this.courseIndex;
            courseItemIndexTmp = this.courseItemIndex;
            this.searchNextVoice(this.isVideoToAudio ? 0 : 1);
          } else {
            this.showTryEnd = true;
          }
        } else if (
          this.courseList[this.courseIndex + 1] &&
          this.courseList[this.courseIndex + 1].prodType == 111 &&
          this.courseList[this.courseIndex + 1].assets &&
          this.courseList[this.courseIndex + 1].assets.items[0] &&
          (
            !this.courseList[this.courseIndex + 1].hasPermission &&
            ((this.courseList[this.courseIndex + 1].assets.items[0].watchPermission == 1 &&
              (this.courseList[this.courseIndex + 1].assets.items[0].watchTime > 0 || this.courseList[this.courseIndex + 1].assets.items[0].watchTimeSeconds > 0) &&
              this.courseList[this.courseIndex + 1].assets.items[0].isPreview == 1) ||
            (this.courseList[this.courseIndex + 1].assets.items[0].allowWholeWatch == 1 &&
              this.courseList[this.courseIndex + 1].assets.items[0].isPreview == 1))
          )
        ) {
          courseIndexTmp = this.courseIndex;
          courseItemIndexTmp = this.courseItemIndex;
          this.searchNextVoice(this.isVideoToAudio ? 0 : 1);
        } else {
          this.showTryEnd = true;
        }
      } else if (this.courseList[this.courseIndex].hasPermission) {
        if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) != 1) {
          this.lessonMemberLog(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, 1) //这个接口每个课时只访问一次
        }
        // this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = 1;
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = 1;
        console.log(111112, startSt, this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio, this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio)
        if (startSt != 0) {
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (playedDuration > 0.2) {
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, 1, this.isVideoToAudio ? 0 : 1, playedDuration);
          } else {
            startSt = 0;
            endSt = 0;
            playedDuration = 0;
          }
        }
      }
      // this.$forceUpdate();
      // if (
      //   (this.courseList[this.courseList.length - 1].courseType == 1) &&
      //   (courseIndexTmp == this.courseList.length - 1) &&
      //   (courseItemIndexTmp == this.courseList[this.courseList.length - 1].assets.items.length - 1) &&
      //   this.is_page
      // ) { //该页播放结束后，下一页的数据还未请求回来，则置currentPageEnd为true，待请求数据结束后继续searchNextVoice
      //   this.currentPageEnd = true;
      //   // this.getMoreCourse();
      // } else {
        if (pageStatus != 'hidden') {
          courseIndexTmp = this.courseIndex;
          courseItemIndexTmp = this.courseItemIndex;
          this.searchNextVoice(this.isVideoToAudio ? 0 : 1);
        }
      // }
    },
    //试看时间结束，判断是否有试看权限 && 试看时间大于0 && 当前播放的是第一节
    watchEnd() {
      if (
        this.courseList[this.courseIndex].hasPermission ||
        (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchPermission == 1 &&
          (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTime > 0 || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].watchTimeSeconds > 0) &&
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPreview == 1) ||
        (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].allowWholeWatch == 1 &&
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPreview == 1)
      ) {
        // this.$showCjToast({
        //   text: "可试听结束",
        //   type: 'text',
        //   isShowMask: true,
        //   time: 3000
        // });
        this.showTryEnd = true;
      }
    },
    popDetail(rIndex, rItem) {
      if (!this.dataInfo.hasPermission && !rItem.previewLabel && rItem.isSaleOnly != 1 && rItem.prodType != 112 && rItem.prodType != 8) {
        this.$showCjToast({
          text: "获取专栏权限后可查看",
          type: 'text',
        });
        return
      }
      if (this.courseList[rIndex].courseType == 2 || this.courseList[rIndex].courseType == 51 || this.courseList[rIndex].courseType == 180 || this.courseList[rIndex].courseType == 8) {
        let cId = this.courseList[rIndex].courseType == 8 ? rItem.prodId : rItem.courseId;
        this.clickCourseItem(cId, rItem.courseType, rItem, rIndex);
        return
      }
      if (!rItem.assets.items || !rItem.assets.items.length) {
        this.getClassList(rIndex)
      }
      if (this.courseList[rIndex].show) {
        // this.courseList[rIndex].show = false;
        // this.$forceUpdate();
        this.$set(this.courseList[rIndex], 'show', false);
      } else {
        // this.courseList[rIndex].show = true;
        // this.$forceUpdate();
        this.$set(this.courseList[rIndex], 'show', true);
      }
    },
    // 切换到下一音频并播放
    searchBeforeVoice() {
      if (this.courseList[courseIndexTmp].courseType == 1 && courseItemIndexTmp > 0) {
        courseItemIndexTmp--;
        if (
          this.courseList[courseIndexTmp].courseType == 1 &&
          (this.courseList[courseIndexTmp].hasPermission ||
            (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchPermission == 1 &&
              (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchTime > 0 || this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchTimeSeconds > 0) &&
              this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].isPreview == 1) ||
            (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].allowWholeWatch == 1 &&
              this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].isPreview == 1))
        ) {
          // this.courseIndex = courseIndexTmp;
          // this.courseItemIndex = courseItemIndexTmp;
          this.seeVoice(courseIndexTmp, courseItemIndexTmp);
        } else {
          this.searchBeforeVoice();
        }
      } else if (courseIndexTmp > 0) {
        courseIndexTmp--;
        if (this.courseList[courseIndexTmp].assets && this.courseList[courseIndexTmp].assets.items) {
          courseItemIndexTmp = this.courseList[courseIndexTmp].assets.items.length - 1;
        } else {
          courseItemIndexTmp = 0;
        }
        if (
          this.courseList[courseIndexTmp].courseType == 1 &&
          this.courseList[courseIndexTmp].assets.items &&
          this.courseList[courseIndexTmp].assets.items.length > 0 &&
          (this.courseList[courseIndexTmp].hasPermission ||
            (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchPermission == 1 &&
              (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchTime > 0 || this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].watchTimeSeconds > 0) &&
              this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].isPreview == 1) ||
            (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].allowWholeWatch == 1 &&
              this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].isPreview == 1))
        ) {
          // this.courseIndex = courseIndexTmp;
          // this.courseItemIndex = courseItemIndexTmp;
          this.$set(this.courseList[courseIndexTmp], 'show', true);
          this.seeVoice(courseIndexTmp, courseItemIndexTmp);
        } else {
          this.searchBeforeVoice();
        }
      }
    },
    checkWatchPermission(index, sIndex) {
      if (!this.courseList[index] || !this.courseList[index].assets.itemCount) {
        return false;
      }
      if (
        this.courseList[index].hasPermission
        || (this.courseList[index].assets.items[sIndex].watchPermission == 1
          && (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0)
          && this.courseList[index].assets.items[sIndex].isPreview == 1)
        || (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1
          && this.courseList[index].assets.items[sIndex].isPreview == 1)
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 切换到下一音频并播放
    async searchNextVoice(courseType) {
      searchType = courseType;
      if (this.courseList[courseIndexTmp].courseType == searchType && ((courseItemIndexTmp < this.courseList[courseIndexTmp].assets.items.length - 1) || (courseItemIndexTmp == this.courseList[courseIndexTmp].assets.items.length - 1 && this.courseList[courseIndexTmp].isNextPage))) {
        if (courseItemIndexTmp == this.courseList[courseIndexTmp].assets.items.length - 1 && this.courseList[courseIndexTmp].isNextPage) {
          await this.getClassList(courseIndexTmp);
        }
        courseItemIndexTmp++;
        if (this.courseList[courseIndexTmp].courseType == searchType && this.checkWatchPermission(courseIndexTmp, courseItemIndexTmp)) {
          // this.courseIndex = courseIndexTmp;
          // this.courseItemIndex = courseItemIndexTmp;
          if (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterId && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterSort == 1 && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].showStatus == 'hide') {
            for (let i = 0; i < this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].cnt; i++) {
              if (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i] && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i].chapterId == this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterId) {
                this.$set(this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i], "showStatus", 'show');
              }
            }
          }
          if (courseType == 0 && !this.isVideoToAudio) {
            this.playNextVideo(courseIndexTmp, courseItemIndexTmp);
          } else if (courseType == 1 || this.isVideoToAudio) {
            this.seeVoice(courseIndexTmp, courseItemIndexTmp);
          }
        } else {
          this.searchNextVoice(this.isVideoToAudio ? 0 : searchType);
        }
      } else if (courseIndexTmp < this.courseList.length - 1) {
        if (!this.showAllCourse) { //只展示单节的时候不进入下一节
          return;
        }
        courseItemIndexTmp = 0;
        courseIndexTmp++;
        if (
          this.courseList[courseIndexTmp].courseType == searchType &&
          this.courseList[courseIndexTmp].assets.itemCount &&
          this.checkWatchPermission(courseIndexTmp, courseItemIndexTmp)
        ) {
          if (this.courseList[courseIndexTmp].prevPage || !this.courseList[courseIndexTmp].assets.items || !this.courseList[courseIndexTmp].assets.items.length) {
            this.courseList[courseIndexTmp].prevPage = 0;
            this.courseList[courseIndexTmp].nextPage = 1;
            await this.getClassList(courseIndexTmp);
          }
          // this.courseIndex = courseIndexTmp;
          // this.courseItemIndex = courseItemIndexTmp;
          this.$set(this.courseList[courseIndexTmp], 'show', true);
          if (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterId && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterSort == 1 && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].showStatus == 'hide') {
            for (let i = 0; i < this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].cnt; i++) {
              if (this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i] && this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i].chapterId == this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp].chapterId) {
                this.$set(this.courseList[courseIndexTmp].assets.items[courseItemIndexTmp + i], "showStatus", 'show');
              }
            }
          }
          if (courseType == 0 && !this.isVideoToAudio) {
            this.playNextVideo(courseIndexTmp, courseItemIndexTmp);
          } else if (courseType == 1 || this.isVideoToAudio) {
            this.seeVoice(courseIndexTmp, courseItemIndexTmp);
          }
        } else {
          this.searchNextVoice(this.isVideoToAudio ? 0 : searchType);
        }
      } else if (courseIndexTmp == this.courseList.length - 1 && this.is_page) {
        await this.getMoreCourse();
        this.searchNextVoice(this.isVideoToAudio ? 0 : searchType);
      }
    },
    //播放当前音频课程
    seeVoice(index, sIndex, isFirst = 0, playedEnd = 0) {
      //非微信 && 非移动端 不让观看
      // if (utilJs.isOpenPcGuard()) {
      //   this.$refs.notSupportPlay.public_openNoSupport();
      //   return;
      // }
      if ((((!this.dataInfo.hasPermission || this.dataInfo.payType == 1) && this.dataInfo.collectPage == 1) || ((this.dataInfo.hasPermission || this.dataInfo.payType == 3) && this.dataInfo.collectPage != 3)) && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false) {
        this.goForm('', 0, null, 1);
        return
      }
      if (!this.dataInfo.hasPermission && this.dataInfo.status == 2) {
        this.$showCjToast({
          text: "该专栏已下架",
          type: 'text',
          time: 1000
        });
        return;
      }
      //免费课程并且需要关注后才能观看
      // if (this.dataInfo.payType == 1 && this.cfg && this.cfg.enableSubscribeWechat == 1) {
      //   this.freeWatch = true;
      //   return;
      // }
      this.hasClickPlay = true;
      if (utilJs.isWeiXin() && this.$store.state.oem_store.isFirstPlayAudio && this.dataInfo.hasPermission) { //首次播放给与提示：必须点击播放按钮才能进行播放
        this.$showCjToast({
          text: "微信出于安全考虑，首次播放必须点击播放器的播放按钮才能进行播放",
          type: 'text',
        });
        this.$store.commit('updateIsFirstPlayAudio', false);
      }
      //如果是超过最后一节，则播放第一节
      // if (index >= this.dataInfo.dirCount) {
      //   index = 0;
      // }
      //如果小于第一节，则播放最后一节
      // if (index < 0) {
      //   index = this.dataInfo.dirCount - 1;
      // }

      //有权限 | 当前播放第一节并且可以试听并且试听分钟数>0 | 当前播放第一节并行整节可以试听并且总节数>1
      //分销第一节可试听
      if (
         this.courseList[index].hasPermission ||
        (this.courseList[index].assets.items[sIndex].watchPermission == 1 &&
          (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0) &&
          this.courseList[index].assets.items[sIndex].isPreview == 1) ||
        (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1 &&
          this.courseList[index].assets.items[sIndex].isPreview == 1)
      ) {
        if (!this.dataInfo.hasPermission) {
         this.isSelectedVoice = true; //试听也直接播放
        }
        if (startSt != 0 && this.courseList[this.courseIndex].hasPermission && this.courseList.length > 0 && (this.courseList[this.courseIndex].courseType == 1 || this.isVideoToAudio) && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) { //将之前播放的停掉
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
            let progress = Number(curPlayTime / totalTime).toFixed(2);
            // this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
          } else {
            startSt = 0
            endSt = 0;
            lastScroll = 0;
            playedDuration = 0;
          }
        } else if (startSt != 0 && this.courseList[this.courseIndex].hasPermission && this.courseList.length > 0 && this.courseList[this.courseIndex].courseType == 0 && !this.isVideoToAudio && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) {
          let currentTime = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.currentTime : this.tenObj.currentTime()) : 0;
          let videoDuration = (this.tenObj != null && this.tenObj != '') ? (this.tenObj.playerType == "xg" ? this.tenObj.duration : this.tenObj.duration()) : 0;
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          if (currentTime > 2 && playedDuration > 0.2) {
            let progress = Number(currentTime / videoDuration).toFixed(2);
            this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, 0, playedDuration);

            this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
            // this.courseList[this.courseIndex].assets.items[this.courseItemIndex].goProcess = true;
            if (Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio) > Number(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio) && (progress != 1)) {
              this.courseList[this.courseIndex].assets.items[this.courseItemIndex].progressRatio = progress;
            }
          } else {
            startSt = 0
            endSt = 0;
            playedDuration = 0;
          }
        }
        this.courseIndex = index;
        this.courseItemIndex = sIndex;
        this.hasListen = true;
        this.hasSharePosition = false;
        this.$nextTick(() => {
          // this.appNeedPlayThis = playedEnd != 1 ? 1 : 0;//app播放结束自动播放下一首的时候传0
          this.audioPlayTime = 0;
          curPlayTime = 0;
          this.audioMp3Src = this.isVideoToAudio && this.courseList[this.courseIndex].courseType == 0 ? this.courseList[this.courseIndex].assets.items[this.courseItemIndex].audioUrl : (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].mp3Url || this.courseList[this.courseIndex].assets.items[this.courseItemIndex].audioUrl);
          this.audioM3u8Src = this.isVideoToAudio && this.courseList[this.courseIndex].courseType == 0 ? this.courseList[this.courseIndex].assets.items[this.courseItemIndex].audioUrl : this.courseList[this.courseIndex].assets.items[this.courseItemIndex].m3u8Url;
        });
        //给后端数据埋点使用，点击的时候上报学习记录（调用课程详情接口后端就会记录学习）
        this.reportCourseStudyByColumn(this.courseList[index].courseId, PROD_TYPE_ENUM.VOICE);
      } else {
        if (this.dataInfo.payType == 3) {
          this.$showCjToast({
            text: '输入密码后可以收听此课程的所有音频',
            type: 'text'
          });
        } else {
          this.$showCjToast({
            text: '购买后可以收听此课程的所有音频',
            type: 'text'
          });
        }
      }
    },
    clickStartVoice(index, sIndex) {
      if (this.audioBindPhoneSetting && this.audioBindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (
        this.courseList[index].hasPermission ||
        (this.courseList[index].assets.items[sIndex].watchPermission == 1 &&
          (this.courseList[index].assets.items[sIndex].watchTime > 0 || this.courseList[index].assets.items[sIndex].watchTimeSeconds > 0) &&
          this.courseList[index].assets.items[sIndex].isPreview == 1) ||
        (this.courseList[index].assets.items[sIndex].allowWholeWatch == 1 &&
          this.courseList[index].assets.items[sIndex].isPreview == 1)
      ) {
        if (this.courseList[this.courseIndex] && (this.courseList[this.courseIndex].courseType == 1 || this.isVideoToAudio) && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items[this.courseItemIndex] && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying) { //将之前播放的停掉
          this.stopVoice();
        }
        if (this.tenObj) {
          this.tenObj.pause();
          this.destroyPlayer();
          this.tenObj = null;
        }
        this.seeVoice(index, sIndex);
      } else {
        this.$showCjToast({
          text: "购买后可以收听此课程的所有音频",
          type: 'text'
        });
      }
    },
    stopVoice() {
      this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
      if (curPlayTime > 2 && totalTime != 0 && this.courseList[this.courseIndex].hasPermission && startSt != 0) {
        let progress = Number(curPlayTime / totalTime).toFixed(2);
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        if (playedDuration > 0.2) {
          this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
        } else {
          startSt = 0;
          endSt = 0;
          playedDuration = 0;
        }
      }
      this.$forceUpdate();
      this.audioPause();
    },
    continuePlay() {
      /*if (
        this.courseList[this.courseIndex].hasPermission ||
        (this.courseList[this.courseIndex].watchPermission == 1 &&
          this.courseList[this.courseIndex].watchTime > 0 &&
          this.courseItemIndex == 0) ||
        (this.courseList[this.courseIndex].allowWholeWatch == 1 &&
          this.courseItemIndex == 0 &&
          this.courseList[this.courseIndex].assets.items.length > 1) ||
        (this.courseList[this.courseIndex].allowWholeWatch == 1 &&
          this.courseItemIndex == 0 &&
          this.distributionId)
      ) {
        if (this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying == true) {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
          this.$forceUpdate();
          this.audioPause();
        } else {
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = true;
          this.$forceUpdate();
          this.audioPlay();
        }*/
      let $this = this;
      if (this.courseList.length > 0 && this.courseList[this.courseIndex] && (this.courseList[this.courseIndex].courseType == 1 || this.courseList[this.courseIndex].courseType == 0) && this.courseList[this.courseIndex].assets) {
        this.$set(this.courseList[this.courseIndex], 'show', true);
      }
      this.$nextTick(function () {
        setTimeout(() => {
          let id = this.courseIndex + '|' + this.courseItemIndex;
          let id1 = this.courseIndex
          let id2 = 'p' + this.courseIndex;
          let offsetTop = 0;
          if (this.courseItemIndex == 0) {
            offsetTop = document.getElementById(id2) && document.getElementById(id2).offsetTop ? document.getElementById(id2).offsetTop : 0;
          } else {
            offsetTop = document.getElementById(id) && document.getElementById(id).offsetTop ? document.getElementById(id).offsetTop : 0;
          }
          let offsetTop1 = document.getElementById(id1) && document.getElementById(id1).offsetTop ? document.getElementById(id1).offsetTop : 0;
          let columnTop = document.getElementById('columnList') && document.getElementById('columnList').offsetTop ? document.getElementById('columnList').offsetTop : 0;
          if (offsetTop + columnTop > 120) {
            document.documentElement.scrollTop = offsetTop + columnTop - 360;
            document.body.scrollTop = offsetTop + columnTop - 360;
          }
          document.getElementById('modelCourseList').scrollTop = offsetTop1 > 110 ? offsetTop1 - 47 : 0;
        }, 200);
        setTimeout(() => {
          $this.goToLast = false;
          $this.goToLast1 = false;
        }, 250);
      });
      //}
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.extId + '&redeemType=38&limit=' + this.limit + '&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = res.data ? $this.couponList.concat(res.data) : [];
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    clickDesc(e) {
      let imgNodeList = document.querySelectorAll('#descParent img');
      let imgArr = [];
      for (let item of imgNodeList) {
        item.src && imgArr.push(item.src)
      }
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: imgArr // 需要预览的图片http链接列表
        });
      }
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = this.distribution ? global.ckFrom.distributionColumnPay : global.ckFrom.column;
      let type = this.dataInfo.collage ? 3 : this.dataInfo.sales ? 2 : this.dataInfo.bargain ? 5 : 4;
      let cId = this.dataInfo.isFriendHelper ? this.dataInfo.faId : this.dataInfo.collage ? this.dataInfo.collage.collageId : this.dataInfo.bargain ? this.dataInfo.bargain.bargainId : this.dataInfo.sales.pId;
      let distribution = this.distribution;
      let proId = this.extId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, distribution: distribution, proId: proId } });
    },
    clickCommentBtn() {
      this.addComment();
      this.$nextTick(() => {
        var commentOffsetTop =
          document.getElementById("commentWrap")
            ? document.getElementById("commentWrap").offsetTop
            : 0;
        var videoBoxHeigh = document.querySelector("#videoBox")
          ? document.querySelector("#videoBox").offsetHeight
          : 0;
        if (this.hasClickPlay && this.courseList[this.courseIndex].prodType == 110) {
          window.scrollTo(0, commentOffsetTop - videoBoxHeigh - 640 * 1.9 / 16)
        } else {
          window.scrollTo(0, commentOffsetTop - 640 * 1.9 / 16)
        }
      })
    },
    getCommentStatus() {
      this.commentStatus = 0;
      if (this.dataInfo.enableComment == 1 || (this.dataInfo.enableComment == 2 && this.cfg && this.cfg.enableComment == 1 && this.cfg.enableColumnComment == 1)) {
        this.commentStatus = 1;
        this.$nextTick(() => {
          this.$refs.commentCom && this.$refs.commentCom.public_initData()
        })
      }
    },
    goVipBuy(cmpId, type) {
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUp",
        query: { 'prodId': cmpId, 'type': type }
      });
    },
    // enter搜索
    enterSearch() {
      if (this.courseList.length > 0 && this.courseList[this.courseIndex].courseType == 1 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
        // this.audioPause();
        // document.getElementById('audioPlayer').src = "";
        // this.$forceUpdate();
      }
      this.hasClickPlay = false;
      this.isOnPlaying = false;
      this.page = 1;
      this.courseIndex = 0;
      this.courseItemIndex = 0;
      this.indexAll = -1;
      this.showAllCourse = true;
      // this.courseList = [];
      this.getMoreCourse();
      this.$refs.searchContent.blur();
    },
    // 取消搜索
    cancelSearch() {
      if (this.courseList.length > 0 && this.courseList[this.courseIndex].courseType == 1 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex]) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
      }
      this.hasClickPlay = false;
      this.isOnPlaying = false;
      this.showSearch = false;
      this.searchWord = '';
      this.page = 1;
      // if (this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]') {
      //   this.courseIndex = (this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex;
      //   this.courseItemIndex = this.dataInfo.learningPosition.innerIndex;
      // }
      this.getMoreCourse(1);
    },
    sortList() {
      if (this.indexAll == -1) {
        if (this.sort == "desc") {
          this.sortDesc();
        } else {
          this.sortAsc();
        }
      }
    },
    // 升序列表
    sortAsc() {
      if (this.courseList.length == 0) {
        return;
      }
      // if (this.courseList[this.courseIndex].courseType == 1 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex] && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying) {
      //   this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
      //   this.audioPause();
      //   document.getElementById('audioPlayer').src = "";
      //   this.courseIndex = 0;
      //   this.courseItemIndex = 0;
      //   this.$forceUpdate();
      // }
      // if (this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]') {
      //   this.courseIndex = (this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex;
      //   this.courseItemIndex = this.dataInfo.learningPosition.innerIndex;
      // }
      if (this.courseList[this.courseIndex] && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items && this.courseList[this.courseIndex].assets.items.length > 0) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
        this.hasClickPlay = false;
        this.isOnPlaying = false;
      }
      this.sort = "asc";
      this.courseList = [];
      this.page = 1;
      this.getMoreCourse(0, 1);
    },
    // 降序列表
    sortDesc() {
      if (this.courseList.length == 0) {
        return;
      }
      // if (this.courseList[this.courseIndex].courseType == 1 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex] && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying) {
      //   this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
      //   this.audioPause();
      //   document.getElementById('audioPlayer').src = "";
      //   this.courseIndex = 0;
      //   this.courseItemIndex = 0;
      //   this.$forceUpdate();
      // }
      // this.courseIndex = 0;
      // this.courseItemIndex = 0;
      if (this.courseList[this.courseIndex] && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items && this.courseList[this.courseIndex].assets.items.length > 0) {
        this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying = false;
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
        this.hasClickPlay = false;
        this.isOnPlaying = false;
      }
      this.sort = "desc";
      this.hasDescSort = true;
      this.courseList = [];
      this.page = 1;
      this.getMoreCourse(0, 1);
    },
    // 点击搜索
    clickSearch() {
      this.showSearch = true;
      this.$nextTick(function () {
        this.$refs.searchContent.focus();
      });
    },
    // // 限时购倒计时
    falshSalesTime(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.dataInfo.bargain.status = status
      }
    },
    // // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
        if (status == 2) {
          this.ckFrom = global.ckFrom.flashSalesColumn;
        }
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        // this.dataInfo.bargain.status = status
        this.getColumnDetail(1);
      }
      // 活动已结束，清空所有营销活动信息及状态
      if (status == -1) {
        this.dataInfo.sales = null;
        this.dataInfo.collage = null;
        this.dataInfo.bargain = null;
        this.dataInfo.isFriendHelper = false;
        this.ckFrom = global.ckFrom.column;
      }
    },
    //只是套餐详情页
    clickPackageItem(packageId) {
      this.$routerGo(this, "push", {
        path: "/homePage/package/packageDetail",
        query: { combosId: packageId }
      });
    },
    //助力详情
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'text'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.dataInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    moreDeviceScroll() {
      let bWidth = document.getElementById('app').clientWidth;
      let moreDeviceHeight = (bWidth / 16) * 2;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let deviceOffsetTop =
      document.querySelector("#moreDevice").offsetTop != null
          ? document.querySelector("#moreDevice").offsetTop
          : 0;
      let infoOffsetTop =
      document.querySelector("#courseInfo") && document.querySelector("#courseInfo").offsetTop != null
          ? document.querySelector("#courseInfo").offsetTop
          : 0;
      if (deviceOffsetTop > 0) {
        if (scrollTop >= (infoOffsetTop + deviceOffsetTop + moreDeviceHeight)) {
          this.moreDeviceType = 2;
        } else {
          this.moreDeviceType = 1;
        }
      }
    },
    //typeBar的置顶样式
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var offsetTop = document.querySelector('#divider') ? document.querySelector('#divider').offsetTop : 54;
      var offsetTop0 = 0;
      var videoBoxHeigh = 0;
      if (this.courseItemIndex == 0) {
        offsetTop0 = document.getElementById('p' + this.courseIndex) ? document.getElementById('p' + this.courseIndex).offsetTop : 0;
      } else {
        offsetTop0 = document.getElementById(this.courseIndex + '|' + this.courseItemIndex) ? document.getElementById(this.courseIndex + '|' + this.courseItemIndex).offsetTop : 0;
      }
      if (this.hasClickPlay && this.courseList && this.courseList.length > 0 && this.courseList[this.courseIndex] && this.courseList[this.courseIndex].prodType == 110) {
        videoBoxHeigh = document.querySelector("#videoBox")
          ? document.querySelector("#videoBox").offsetHeight
          : 0;
      }
      if (scrollTop >= offsetTop && offsetTop > 0 && !(this.hasClickPlay && this.courseList[this.courseIndex].prodType == 110)) {
        this.tabhBarFixed = true;
        this.showBottomPlayer = true;
      } else if (!(this.hasClickPlay && offsetTop > 0 && this.courseList[this.courseIndex].prodType == 110)) {
        this.tabhBarFixed = false;
        this.showBottomPlayer = false;
      }
      if (this.styleType == 2 && offsetTop > 0 && scrollTop >= (offsetTop - videoBoxHeigh) && this.hasClickPlay && this.courseList[this.courseIndex].prodType == 110) {
        this.tabhBarFixed = true;
      } else if (this.hasClickPlay && this.courseList[this.courseIndex].prodType == 110 && offsetTop > 0) {
        this.tabhBarFixed = false;
      }
      if (scrollTop > lastScroll + 10) { //向下
        lastScroll = scrollTop;
        if (scrollTop > 60) {
          this.scrollDirection = 1;
        }
      }
      if (scrollTop < lastScroll) { // 向上
        lastScroll = scrollTop;
        if (scrollTop < 40) {
          this.scrollDirection = 0;
        }
      }
      this.handleColum(scrollTop, offsetTop0);
      //滚到底部加载更多，延迟200ms防止刚切换tab的时候就触发
      let that = this;
      setTimeout(() => {
        let sTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        if (sTop + clientHeight >= (scrollHeight - 20) && (that.typeBar == 1 || that.showCouseList == false) && that.is_page) {
          that.getMoreCourse();
        }
        if (document.getElementById("modelCourseList")) {
          let sHeight = Math.max(document.getElementById("modelCourseList").scrollHeight, document.getElementById("modelCourseList").scrollHeight);
          if (sHeight > 400 && (that.typeBar == 1 || that.showCouseList == true) && that.is_page) {
            that.getMoreCourse();
          }
        }
      }, 200);
      // if (document.querySelector("#moreDevice")) {
      //   this.moreDeviceScroll();
      // }
    },
    handleColum(scrollTop, offsetTop0) {
      var sT = scrollTop;
      var oT0 = offsetTop0;
      let $this = this
      if ($this.tabhBarFixed == false) {
        $this.goToLast = (sT < (oT0 - 400 - 523) || (sT > (oT0 + 650 - 523))) ? true : false;
      } else {
        $this.goToLast = (sT < (oT0 - 400 - 471) || (sT > (oT0 + 650 - 471))) ? true : false;
      }
      if (document.getElementById("modelCourseList")) {
        let modelScro = document.getElementById("modelCourseList").scrollTop
        var offsetTop1 = document.getElementById('modelCourseList').childNodes[$this.courseIndex] ? document.getElementById('modelCourseList').childNodes[$this.courseIndex].offsetTop : 0;
        if ((modelScro < (offsetTop1 - 220)) || (modelScro > (offsetTop1 + 220))) {
          $this.goToLast1 = true
        } else {
          $this.goToLast1 = false
        }
      }
    },
    gcd: function (cinfo) {
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //跳转到拼团详情页
    goCollageDetail: function (groupId, collageId) {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          let hfs = this.dataInfo.isRelForm && !this.dataInfo.hasFormLog;
          let pathQuery = {
            'groupId': groupId,
            'collageId': collageId,
            ckFrom: this.ckFrom,
            isRelForm: hfs,
            extId: this.extId,
            relType: 4,
            recRelateId: this.recRelateId,
            recType: this.recType,
            goodsRoomId: ''
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    goBuy: function (groupId, collageId) {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          //要加判断是否选择阶梯
          if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 1 ) {
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    //改变typeBar
    changeType(type, changeDir) {
      if (this.typeBar != type) {
        this.moveDirection = changeDir;
        this.typeBar = type;
        this.handleScroll();
      }
      return false;
    },
    //回退到上级(知识套餐),不支持单独售卖
    backPackage: function () {
      this.showCombo = true;
      // if (pathFrom == "/homePage/package/packageDetail") {
      //   this.$router.go(-1);
      // } else {
      //   this.$routerGo(this, "push", {
      //     path: "/homePage/package/packageList",
      //     query: { noHighL: true, 'showAll': true, 'proType': 4, "proId": this.extId, distribution: this.distributionId }
      //   });
      // }
    },
    closeCombo: function () {
      this.showCombo = false;
    },
    //点击购买专栏，跳转到购买页
    clickBuyNow: function (selectNum = 0) {
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      // 判断非推荐有礼下单支付得时候，如果当前是推荐有礼的不带参数，走普通下单流程
      if (this.recType != 3 && this.dataInfo.recommend != null && this.dataInfo.recommend.isExist == 0) {
        this.recRelateId = '';
      }
      let pId = this.ckFrom == this.cfrom.flashSalesColumn ? this.dataInfo.sales.pId : null;
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        let pathQuery = {
          cId: this.cId,
          extId: this.extId,
          ckFrom: this.distribution ? global.ckFrom.distributionColumnPay : this.ckFrom,
          isFromInvite: 0,
          isGoPay: this.dataInfo.isRelForm ? false : true,
          recRelateId: this.recRelateId,
          recType: this.recType
        };
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if ((this.ckFrom == this.cfrom.flashSalesColumn && this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true) {
          pathQuery.pId = pId;
        } else if (this.optimal && this.optimal.optimalPriceType != 101) {
          pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : 9;
        }
        utilJs.goBindMobile(pathQuery);
        return;
      }
      this.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : (this.ckFrom == this.cfrom.flashSalesColumn ? this.cfrom.flashSalesColumn : this.cfrom.column);
      // 有关联表单，则跳到报名表单处
      if ((this.dataInfo.collectPage == 1 || (this.dataInfo.collectPage == 2 && selectNum > 0)) && this.dataInfo.collectPage != 3 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm('', selectNum);
      } else {
        let pathQuery = {
          cId: this.cId,
          extId: this.extId,
          ckFrom: this.distribution ? global.ckFrom.distributionColumnPay : this.ckFrom,
          isFromInvite: 0,
          recRelateId: this.recRelateId,
          recType: this.recType
        };
        if ((this.ckFrom == this.cfrom.flashSalesColumn && this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true) {
          pathQuery.pId = pId;
        } else if (this.optimal && this.dataInfo.sales && this.optimal.optimalPriceType != 101) {
          pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : 9;
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (selectNum > 0) { //企业团购
          pathQuery.isGroupPurchase = true;
          pathQuery.groupSelectNum = selectNum;
          pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/course/coursePay",
          query: pathQuery
        });
      }
    },
    //表单
    goForm(bargainId, selectNum = 0, goItem = null, goBack = 0) {
      let pId = this.ckFrom == this.cfrom.flashSalesColumn ? this.dataInfo.sales.pId : null;
      this.ckFrom = this.isShowPresent == true ? this.cfrom.presentColumn : (this.ckFrom == this.cfrom.flashSalesColumn ? this.cfrom.flashSalesColumn : this.cfrom.column);
      let isGoBack = goBack == 1 || this.dataInfo.hasPermission == true || (this.isMarketing && !this.dataInfo.sales) || this.dataInfo.payType == 3 || this.dataInfo.isSaleOnly == 0 ? 1 : 0;
      let pathQuery = {
        cId: this.cId,
        extId: this.extId,
        ckFrom: this.distribution ? global.ckFrom.distributionColumnPay : this.ckFrom,
        isFromInvite: 0,
        pId: pId,
        relType: 4,
        type: 1,
        recRelateId: this.recRelateId,
        recType: this.recType,
        isGoBack: isGoBack,
        bargainId: bargainId
      }
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (selectNum > 0) { //企业团购
        pathQuery.isGroupPurchase = true;
        pathQuery.groupSelectNum = selectNum;
        pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
      }
      if (goItem) {
        let type = goItem.prodType == 110 || goItem.prodType == 111 || goItem.prodType == 112 ? 5 : goItem.prodType;
        // 跳转到对应的详情页面 知识套餐目录的type 1课程，4专栏，5资料库，6测评，7社群，8直播，9题库，10交互测评，11语音测评，12电子书，13试卷,14圈子,15直播间
        // 将知识套餐目录的type 转为 goDetails.js中typeToUrl的key值
        let prodId = goItem.prodId

        if (type == this.cfrom.datum && this.dataInfo.hasPermission) {
          pathQuery.qFromColumnId = this.extId;
        }
        if (type == this.cfrom.course) {
          pathQuery.qExtId = this.extId
          if (this.distribution) {
            pathQuery.qDistributionId = this.extId
          }
        }
        pathQuery.prodId = prodId;
        pathQuery.prodType = type;
        pathQuery.courseType = goItem.courseType || 0;
        pathQuery.isGoItem = 1;
      }
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let queryT = {
        cId: this.cId,
        extId: this.extId,
        ckFrom: this.ckFrom,
        distribution: this.distribution
      }
      if (this.dataInfo.isSaleOut == 0) {
        queryT.isNoSale = true;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: queryT
      });
    },
    // 点击课程下的课时跳转
    clickCourseDetail(cItem, sItem, sIndex) {
      this.$refs.audioCom.audioPause();
      this.hasAudio = false;
      this.$nextTick(() => {
        if (cItem.hasPermission || (!cItem.hasPermission && ((cItem.assets.items[sIndex].watchPermission == 1 && (cItem.assets.items[sIndex].watchTime > 0 || cItem.assets.items[sIndex].watchTimeSeconds > 0) && cItem.assets.items[sIndex].isPreview == 1) || (cItem.assets && cItem.assets.items.length > 1 && cItem.assets.items[sIndex].allowWholeWatch == 1 && cItem.assets.items[sIndex].isPreview == 1) || (cItem.allowWholeWatch == 1 && this.distributionId && sIndex == 0)))) {
          let t = Number(cItem.courseType);
          switch (t) {
            case 0:
              this.$routerGo(this, "push", {
                path: "/homePage/course/video",
                query: {
                  courseId: cItem.courseId,
                  extId: this.extId,
                  ckFrom: this.ckFrom,
                  goIndex: sIndex,
                  distributionId: this.distribution ? this.extId : '',
                }
              });
              break;
            case 1:
              this.$routerGo(this, "push", {
                path: "/homePage/course/voice",
                query: {
                  courseId: cItem.courseId,
                  extId: this.extId,
                  ckFrom: this.ckFrom,
                  goIndex: sIndex,
                  distributionId: this.distribution ? this.extId : '',
                }
              });
              break;
            case 2:
              this.$routerGo(this, "push", {
                path: "/homePage/course/imgText",
                query: {
                  courseId: cItem.courseId,
                  extId: this.extId,
                  ckFrom: this.ckFrom,
                  distributionId: this.distribution ? this.extId : '',
                }
              });
              break;
          }
        } else {
          this.$showCjToast({
            text: "请购买后再" + (cItem.courseType == 1 ? '收听' : '观看'),
            type: 'text'
          });
        }
      })
    },
    //跳转到课程详情页
    clickCourseItem(courseNo, courseType, cItem, cIndex) {
      if (!this.dataInfo.hasPermission && !cItem.previewLabel && cItem.isSaleOnly != 1 && cItem.prodType != 112 && cItem.prodType != 8) {
        this.$showCjToast({
          text: "获取专栏权限后可查看",
          type: 'text',
        });
        return
      }
      if (this.dataInfo.hasPermission && !this.distributionId) {
        if (cIndex == this.courseIndex) {
          let itemIndex = this.courseList[cIndex].prevPage ? this.courseList[cIndex].prevPage * 20 + this.courseItemIndex : this.courseItemIndex;
          this.setCourseProgress(cIndex, itemIndex)
        } else {
          this.setCourseProgress(cIndex, 0)
        }
      }
      if ((((!this.dataInfo.hasPermission || this.dataInfo.payType == 1) && this.dataInfo.collectPage == 1) || ((this.dataInfo.hasPermission || this.dataInfo.payType == 3) && this.dataInfo.collectPage != 3)) && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false) {
        // this.goForm('', 0, cItem);
        this.goForm('', 0, null, 1);
        return;
      }
      if (cItem.prodType == 8) {
        let dQuery = { datumId: cItem.prodId };
        if (this.dataInfo.hasPermission) {
          dQuery.fromColumnId = this.extId;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/datum/datumDetail",
          query: dQuery
        });
        return;
      }
      let t = Number(courseType);
      switch (t) {
        case 0:
          let queryS = {
            courseId: courseNo,
            extId: this.extId,
            ckFrom: this.ckFrom,
            distributionId: this.distribution ? this.extId : '',
          }
          if (cIndex == this.courseIndex) {
            let itemIndex = this.courseList[cIndex].prevPage ? this.courseList[cIndex].prevPage * 20 + this.courseItemIndex : this.courseItemIndex;
            queryS.goIndex = itemIndex;
          }
          queryS.courseIndex = cIndex;
          this.$routerGo(this, "push", {
            path: "/homePage/course/video",
            query: queryS
          });
          break;
        case 1:
          let queryT = {
            courseId: courseNo,
            extId: this.extId,
            ckFrom: this.ckFrom,
            distributionId: this.distribution ? this.extId : '',
          }
          if (cIndex == this.courseIndex) {
            let itemIndex = this.courseList[cIndex].prevPage ? this.courseList[cIndex].prevPage * 20 + this.courseItemIndex : this.courseItemIndex;
            queryT.goIndex = itemIndex;
          }
          queryT.courseIndex = cIndex;
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: queryT
          });
          break;
        case 2:
          this.$routerGo(this, "push", {
            path: "/homePage/course/imgText",
            query: {
              courseId: courseNo,
              extId: this.extId,
              ckFrom: this.ckFrom,
              distributionId: this.distribution ? this.extId : '',
            }
          });
          break;
        case 51:
          this.$routerGo(this, "push", {
            path: "/homePage/live/liveDetail",
            query: {
              liveId: cItem.liveId
            }
          });
          break;
        case 180:
          this.$routerGo(this, "push", {
            path: "/homePage/live/livePersonalDetail",
            query: {
              liveId: cItem.prodId
            }
          });
          break;
      }
    },
    //跳转至大转盘
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.dataInfo.joinActivityInfo.activityData.id
        }
      });
    },
    //获取专栏详情
    getColumnDetail(isFirstGet = 0) {
      let postUrl = `${global.apiurl}column/detail/${this.extId}`;
      if (this.accessToken) {
        postUrl = postUrl + '?accessToken=' + this.accessToken;
      }
      if (this.distribution) {
        postUrl = `${global.apiurl}distributionMarkets/${this.extId}?time=${Math.random() * 100}`;
      }
      let $this = this
      postUrl = postUrl.includes('?') ? (postUrl + '&isSkeleton=1') : (postUrl + '?isSkeleton=1');
      utilJs.getMethod(postUrl, (res) => {
        this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        if (!res || ((res.status == 0 || res.status == 2) && !res.hasPermission && this.distribution)) {
          let info = res.status == 2 ? '删除' : '下架';
          this.$routerGo(this, "replace", { path: `/error/emptyPage?from=column&info=该专栏已${info}，请联系管理员！` });
        } else {
          setDocumentTitle(res.name.length > 13 ? (res.name.substring(0, 13) + '...') : res.name);// eslint-disable-line
          //判断课程指定日期过期是否已经过期
          if (res.isValid == 2 && (res.permissionType == 0 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) {
            this.hasExpired = utilJs.getTimeByDate(res.validAt) - (new Date()).getTime() < 0;
            if (this.hasExpired) {
              this.$store.commit("updateHasNoticeText", true);
            }
          }
          //如果课程是会员或服务商免费的，课程，专栏，知识套餐等知识产品下架了，也要显示下架
          let vipType = localStorage.getItem("vipType" + localStorage.getItem("userId"));
          if (((!res.hasPermission) || (res.hasPermission && (res.permissionType == 1 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 18 || res.permissionType == 19))) && res.isGrounding == 0) {
            this.isOffSale = true;
            this.$store.commit("updateHasNoticeText", true);
          }
          //定时上架
          if (res.status == 2 && ((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || (vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19)))))))) {
            this.timingPutOn = true;
            this.$store.commit("updateHasNoticeText", true);
          }
          this.dataInfo = res;
          this.optimal = res.optimal || null;
          if (this.dataInfo.isCopy > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
            this.cfg.isCopy = this.dataInfo.isCopy;
          }
          if (this.dataInfo.isCopyPicture > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
            this.cfg.isCopyPicture = this.dataInfo.isCopyPicture;
          }
          this.isCollect = $this.dataInfo.isCollect ? $this.dataInfo.isCollect : false;
          var rewardPoints = sessionStorage.getItem(this.extId + 'rewardPoints');
          if (rewardPoints > 0) {
            this.showPoints = true;
            this.rewardPoints = rewardPoints;
          };

          if (this.dataInfo.joinActivityInfo && this.dataInfo.joinActivityInfo.isShowDialog == 1) {
            this.$cjConfirm({
              title: '',
              titleCenter: true, //标题是否居中
              message: '恭喜！您获得了大转盘抽奖机会！',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: true, //是否显示取消按钮
              cancelButtonText: '稍后再说', //取消按钮文本
              confirmButtonText: '立刻前往', //确认按钮文本
              onConfirm() {
                $this.$routerGo($this, "push", {
                  path: "/homePage/marketing/turntable",
                  query: {
                    taId: $this.dataInfo.joinActivityInfo.activityData.id
                  }
                });
              }
            })
          }

          if (res.collage && this.companyAuth.enableCollage == 1) { //拼团
            let nt = new Date().getTime();
            let st = utilJs.getTimeByDate(res.collage.startTime);
            let et = utilJs.getTimeByDate(res.collage.endTime);
            if (nt >= st && nt < et && res.collage.status < 3) {
              this.ckFrom = this.distribution ? global.ckFrom.distributionCollageColumn : global.ckFrom.collageColumn;
              res.collage.status = 2;
            } else if (nt < st && res.collage.status == 1) {
              this.ckFrom = this.distribution ? global.ckFrom.distributionCollageColumn : global.ckFrom.collageColumn;
              res.collage.status = 2;
            } else if (nt >= et && res.collage.status == 2) {
              res.collage.status = 3;
              res.collage = null;
              this.cId = -1;
              this.ckFrom = global.ckFrom.column;
            } else {
              this.dataInfo.collage = null;
              this.cId = -1;
              this.ckFrom = global.ckFrom.column;
            }
          } else if (res.sales != null && res.sales.status && (res.sales.limit == 0 || res.sales.balance > 0) && this.companyAuth.enableFlashSalesModule == 1) { //限时购
            let nt = (new Date()).getTime();
            let st = utilJs.getTimeByDate(res.sales.sales.startTime);
            let et = utilJs.getTimeByDate(res.sales.sales.endTime);
            if (nt >= st && nt < et && res.sales.sales.status > -1) {
              this.ckFrom = global.ckFrom.flashSalesColumn;
              res.sales.sales.status = 2;
            } else if (nt < st && res.sales.sales.status == 1) {
              this.ckFrom = global.ckFrom.column;
              res.sales.sales.status = 1;
              // this.dataInfo.sales = null;
              this.cId = -1;
            } else if (nt >= et && res.sales.sales.status == 2) {
              res.sales.sales.status = -1;
              this.dataInfo.sales = null;
              this.cId = -1;
              this.ckFrom = global.ckFrom.column;
            } else {
              this.dataInfo.sales = null;
              this.cId = -1;
              this.ckFrom = global.ckFrom.column;
            }
          } else if (res.isFriendHelper) { //友情灌溉
            // let stime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.faStartAt) : 0;
            // let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.faEndAt) : 0;
            // let nowTime = (new Date()).getTime();
            // //faStatus 1未开始,2进行中,3已结束,4已停止
            // if (stime > nowTime) {
            //   this.faStatus = 1;
            // } else if (etime > nowTime) {
            //   this.faStatus = 2;
            // }
          } else {
            this.dataInfo.sales = null;
            this.dataInfo.collage = null;
            this.cId = -1;
            this.ckFrom = global.ckFrom.column;
          }
          this.typeBar = this.dataInfo.tabsType == 4
                          ? ((this.cfg.enableCourseShowType == 2 || (this.cfg.enableCourseShowType == 1 && (!this.dataInfo.hasPermission || this.isUserGroup || this.isOffSale || this.isStoreUserGroup))) ? 0 : 1)
                          : ((this.dataInfo.tabsType == 1 || (this.dataInfo.tabsType == 3 && (!this.dataInfo.hasPermission || this.isUserGroup || this.isOffSale || this.isStoreUserGroup))) ? 0 : 1);
          if (this.fromBackColumn) { //课程详情页点击返回专栏，tab默认选中目录选项
            this.typeBar = 1;
          }
          this.showFormText = res.collectPage != 3 && res.hasPermission == true && res.isRelForm == true && res.hasFormLog == false && localStorage.getItem("showForm") == 1 ? true : false;
          this.dataInfo.showMarketingCard = this.dataInfo.isFriendHelper || this.dataInfo.collage || this.dataInfo.sales || this.dataInfo.bargain;
          // 关联配套打卡
          this.relatedList = res.signColumns;
          this.getRelatedList();
          // 是否显示评论tab
          if (($this.dataInfo.enableComment == 1 && !$this.distributionId && isFirstGet == 0) || ($this.dataInfo.enableComment == 2 && $this.cfg && $this.cfg.enableComment == 1 && !$this.distributionId && $this.cfg.enableColumnComment == 1 && isFirstGet == 0)) {
            $this.tabList.push({
              title: '评论',
              index: 4,
              smallNum: 0
            })
          }
          if (!this.hasRelation && this.dataInfo && this.dataInfo.combos.length > 0 && this.companyAuth.enableComboModule == 1) {
            this.hasRelation = true;
            this.tabList.push({
              title: '推荐',
              index: 3,
            });
          }
          //分享出来的链接默认选中分享者正在观看的那节
          // if ((this.$route.query.courseIndex || this.$route.query.courseItemIndex) && this.dataInfo.hasPermission) {
          //   this.courseIndex = this.$route.query.courseIndex || 0;
          //   this.courseItemIndex = this.$route.query.courseItemIndex || 0;
          //   this.hasSharePosition = true;
          // } else
          if (res.marqueConf) {
            this.dataInfo.marqueConf.userId = localStorage.getItem("userId");
            this.dataInfo.marqueConf.userName = localStorage.getItem("userName");
            this.carouselType = this.dataInfo.marqueConf.carouselType;
            this.placeType = this.dataInfo.marqueConf.placeType;
            if (this.cfg && this.cfg.isShowMarque == 1 && this.dataInfo.marqueConf && this.carouselType == 1 && this.placeType == 5) {
              this.clampTranslateY = Math.floor(Math.random() * 92) + 8;
            }
          }
          if (this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]') {
            if (this.fromBackColumn) { //从课程点击返回专栏按钮，需要定位到专栏目录中该课程
              if (this.$route.query.columnCourseIndex || this.$route.query.columnCourseIndex == 0) {
                this.courseIndex = this.$route.query.columnCourseIndex;
              } else {
                this.courseIndex = (this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex;
              }
              if (this.$route.query.classIndex || this.$route.query.classIndex == 0) {
                this.courseIndexTotal = this.$route.query.classIndex;
                // this.courseItemIndex = this.$route.query.classIndex;
              } else {
                this.courseIndexTotal = this.dataInfo.learningPosition.innerIndex;
                // this.courseItemIndex = this.dataInfo.learningPosition.innerIndex;
              }
            } else {
              this.courseIndex = (this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex;
              this.courseIndexTotal = this.dataInfo.learningPosition.innerIndex;
              // this.courseItemIndex = this.dataInfo.learningPosition.innerIndex;
            }
            hasPosition = true;
          }
          this.getMoreCourse().then(() => {
            if (hasPosition && (this.courseList[this.courseIndex].prodType == 110 || this.courseList[this.courseIndex].prodType == 111)) {
              if (!this.courseList[this.courseIndex].assets || this.courseIndexTotal > this.courseList[this.courseIndex].assets.itemCount) {
                return;
              }
              this.courseItemIndex = this.courseIndexTotal - 20 * this.courseList[this.courseIndex].prevPage;
              this.getClassList(this.courseIndex);
            }
          });//获取课程目录


          this.$nextTick(() => {
            if (!this.dataInfo.hasPermission && !this.distribution) {
              this.getProdRelateCollocation();
            }
            if (!this.distribution) {
              this.$refs.descriptions.getDescptionDetail();
            }
            window.addEventListener('scroll', this.handleScroll);
            document.getElementById('audioPlayer') && document.getElementById('audioPlayer').pause();
            // document.getElementById('divider').setAttribute("style", 'height:' + document.getElementById("tabhBar").offsetHeight + 'px'); //= document.getElementById("tabhBar").offsetHeight;
          });
          this.getCommentStatus();
          !this.distribution && this.getRelation();//获取关联
          if (this.dataInfo.isSaleOnly == 0) { //非单卖则获取相关联的知识套餐和专栏
            this.getBelong(1);
          }
          if (!this.dataInfo.hasPermission) {
            this.getCouponList();
          }
          if (this.isiOS) {
            this.initIosAppData()
          }
          if (this.dataInfo.enterpriseGroup && this.dataInfo.payType == 2) {
            let gpInfo = {
              cover: this.dataInfo.enterpriseGroup.image ? this.dataInfo.enterpriseGroup.image : this.dataInfo.cover,
              title: this.dataInfo.enterpriseGroup.name ? this.dataInfo.enterpriseGroup.name : this.dataInfo.name,
              coursePrice: this.dataInfo.price,
              ladders: this.dataInfo.enterpriseGroup.ladder,
              isValid: this.dataInfo.isValid,
              validTime: this.dataInfo.validTime,
              validAt: this.dataInfo.validAt,
              defultBuyNum: this.dataInfo.enterpriseGroup.ladder[0].minBuyNumber,
              hasGift: this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0 ? true : false
            }
            this.$nextTick(() => {
              this.$refs.gpModal.initData(gpInfo);
            })
          }
          let giftPops = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
          if (this.dataInfo.hasPermission && this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0 && !giftPops.includes(this.extId)) {
            this.dataInfo.giftRelates.forEach((item) => {
              if (item.prodType == global.ckFrom.shopping && item.status != 1) {
                // this.goodsToGet = true;
                let $this = this;
                this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '赠品礼包中包含商城商品，是否前往兑换',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '取消', //取消按钮文本
                confirmButtonText: '去兑换', //确认按钮文本
                onConfirm() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.extId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                  $this.popGiftModal();
                },
                onCancel() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.extId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                }
              })
              }
            })
          }
          const guideData = $this.dataInfo.guideData || null;
          const { hasPermission } = $this.dataInfo;
          const showPosition = guideData && (guideData.showPosition == 3 || (guideData.showPosition == 1 && (!hasPermission || ($this.dataInfo.payType == 1 && $this.dataInfo.isSaleOnly != 0))) || (guideData.showPosition == 2 && hasPermission))
          if ($this.$refs.guidance && guideData && guideData.isOpenGuide == 1 && guideData.guideType.includes(3) && showPosition) {
            utilJs.getLeadSocialLog($this.cfrom.datum, $this.extId).then(dataRes => {
              if (!dataRes || dataRes == '') {
                $this.$refs.guidance.isShowPop();
                utilJs.saveLeadSocialLog($this.cfrom.datum, $this.extId)
              }
            })
          }
          this.watchRecord();
          this.wechatShare();
        }
        if (res.sales && res.sales.sales) {
          this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
        }


      });
    },
    getMoreCourse(isFromCancleSearch = 0, fromSort = 0) {
      return new Promise((resolve, reject) => {
        if (this.isLoading) {
          return;
        }
        this.isLoading = true;
        let isCoursePage = 0; //this.dataInfo.isNewDirShow == 0 ? 1 : 0;
        let columnPermission = this.dataInfo.hasPermission ? 1 : 0;
        let limits = 10;
        if (this.dataInfo.hasPermission && ((this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]') || this.hasSharePosition || fromSort == 1)) {
          if (this.page == 1) {
            limits = (fromSort == 1) ? (Math.ceil(this.dataInfo.hasCourse / 10) * 10) : this.hasSharePosition ? (Math.ceil(this.courseIndex / 10) * 10) : this.dataInfo.learningPosition.page * 10;
          } else {
            limits = 10;
          }
        }
        let postUrl = `${global.apiurl}column/getCourses/${this.extId}?page=${this.page}&limit=${limits}&sort=${this.sort}&name=${this.searchWord}&isCoursePage=${isCoursePage}&columnPermission=${columnPermission}&columnDetailld=0`;
        if (this.distribution) {
          postUrl = `${global.apiurl}distributionMarkets/${this.extId}/subs?page=${this.page}&limit=${limits}&sort=${this.sort}&name=${this.searchWord}&isCoursePage=${isCoursePage}&columnPermission=${columnPermission}`;
        }
        utilJs.getMethod(postUrl, (res) => {
          this.isLoading = false;
          // if (res && res.data && res.data.length) {
          //   this.decryptDirList(res.data);
          // }
          if (this.distribution && res.data && res.data.length > 0) {
            for (let i = 0; i < res.data.length;i++) {
              if (res.data[i].courseType == 0) {
                res.data[i].prodType = 110;
              } else if (res.data[i].courseType == 1) {
                res.data[i].prodType = 111;
              } else if (res.data[i].courseType == 2) {
                res.data[i].prodType = 112;
              }
            }
          }
          if (res && res.data && res.data.length > 0 && !this.distribution) {
            res.data.forEach((item, index) => {
              if ((item.prodType == 110 || item.prodType == 111) && item.payType == 3) {
                item.previewLabel = false;
              }
              if ((item.prodType == 110 || item.prodType == 111) && index == this.courseIndex && hasPosition && this.page == 1) {
                item.prevPage = Math.ceil((this.courseIndexTotal + 1) / 20) - 1;
                item.nextPage = Math.ceil((this.courseIndexTotal + 1) / 20);
              } else {
                item.prevPage = 0;
                item.nextPage = 1;
              }
            });
          }
          if (this.page == 1) {
            if (fromSort == 1) {
              this.courseIndex = this.dataInfo.hasCourse - this.courseIndex - 1;
              // if (res.data[this.courseIndex] && res.data[this.courseIndex].assets && res.data[this.courseIndex].assets.items && res.data[this.courseIndex].assets.items[this.courseItemIndex]) {
              //   res.data[this.courseIndex].assets.items[this.courseItemIndex].goProcess = true;
              // }
            }
            this.courseList = res.data;
            if (!this.courseList[this.courseIndex]) {
              this.courseIndex = 0;
              this.courseItemIndex = 0;
            }
            // else if (!(this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items && this.courseList[this.courseIndex].assets.items[this.courseItemIndex])) {
            //   this.courseItemIndex = 0;
            // }
            // 前5条课程默认展开
            // if (this.dataInfo.hasPermission) {
            //   for (let i = 0; i < 5; i++) {
            //     if (this.courseList[i]) {
            //       this.$set(this.courseList[i], 'show', true);
            //     }
            //   }
            // }
            this.courseListAll = JSON.parse(JSON.stringify(this.courseList));
          } else {
            let list = res.data;
            // for (let k = 0; k < list.length; k++) {
            //   if (list[k].courseType == 1 && list[k].assets) {
            //     for (let j = 0; j < list[k].assets.items.length; j++) {
            //       list[k].assets.items[j].isPlaying = false;
            //     }
            //   }
            // }
            this.courseList = this.courseList.concat(list);
            this.courseListAll = JSON.parse(JSON.stringify(this.courseList));
          }
          // if (this.page != 1 && this.currentPageEnd) {
          //   this.currentPageEnd = false;
          //   courseIndexTmp = this.courseIndex;
          //   courseItemIndexTmp = this.courseItemIndex;
          //   if (searchType == 0) {
          //     this.searchNextVoice(0);
          //   } else {
          //     this.searchNextVoice(1);
          //   }
          // }
          this.page = res.data && (res.data.length >= limits) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? this.page + 1 : this.page;
          this.is_page = res.data && (res.data.length >= limits) ? true : false;//res.current_page < res.last_page;
          if (this.dataInfo.hasPermission && this.is_page && this.page == 2 && this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]' && this.courseList[this.courseIndex]) {
            this.page = this.dataInfo.learningPosition.page + 1;
            // this.courseIndex = (this.dataInfo.autoPlayLog.page - 1) * 10 + this.dataInfo.autoPlayLog.outIndex;
            // this.courseItemIndex = this.dataInfo.autoPlayLog.innerIndex;
            // this.$set(this.courseList[this.courseIndex], 'show', true);
          }
          // else if (this.dataInfo.hasPermission && !this.is_page && this.page == 1 && this.dataInfo.learningPosition && JSON.stringify(this.dataInfo.learningPosition) != '[]' && this.courseList[this.courseIndex]) {
          //   // this.courseIndex = (this.dataInfo.autoPlayLog.page - 1) * 10 + this.dataInfo.autoPlayLog.outIndex;
          //   // this.courseItemIndex = this.dataInfo.autoPlayLog.innerIndex;
          //   this.$set(this.courseList[this.courseIndex], 'show', true);
          // }
          resolve()
        }, failRes => {
          this.isLoading = false;
          reject()
        });
      })
    },
    getClassList(outerIndex, isPrev = 0) {
      return new Promise((resolve, reject) => {
        if (this.loadingClass) {
          return;
        }
        this.currentIndex = outerIndex;
        let currentItem = this.courseList[outerIndex];
        if (currentItem.prodType != 110 && currentItem.prodType != 111 && !currentItem.assets) {
          return;
        }
        if (!this.dataInfo.hasPermission && !currentItem.previewLabel && currentItem.isSaleOnly != 1) {
          return;
        }
        this.loadingClass = true;
        let currentItemId = currentItem.prodId;
        let nextPage = currentItem.nextPage ? currentItem.nextPage : 1;
        let prevPage = currentItem.prevPage ? currentItem.prevPage : 1;
        let page = isPrev == 1 ? prevPage : nextPage
        let columnPermission = this.dataInfo.hasPermission ? 1 : 0;
        let limits = 20;
        let postUrl = `${global.apiurl}courses/${currentItemId}/dirs?page=${page}&limit=${limits}&courseType=0&hasPermission=${columnPermission}`;
        utilJs.getMethod(postUrl, (res) => {
          this.loadingClass = false;
          if (res && res.length && (this.courseList[outerIndex].prodType == 110 || this.courseList[outerIndex].prodType == 111)) {
            this.decryptDirList(res, this.courseList[outerIndex].prodType);
          }
          if (res && res.length > 0) {
            res.forEach(item => {
              if (currentItem.payType == 3 && !this.distribution) {
                item.allowWholeWatch = 0;
                item.watchPermission = 0;
                item.watchTime = 0;
                item.watchTimeSeconds = 0;
              }
              item.isPlaying = false;
            });
          }
          if (page == 1 && !isPrev) {
            this.courseList[outerIndex].assets.items = res;
            this.courseListAll = JSON.parse(JSON.stringify(this.courseList));
          } else {
            if (isPrev) {
              this.courseList[outerIndex].assets.items = [...res, ...this.courseList[outerIndex].assets.items];
              if (outerIndex == this.courseIndex) {
                this.courseItemIndex = this.courseItemIndex + res.length;
              }
            } else {
              //返回该页的第一个视频属于上一页的某个章节，则上一页的那个章节需要展开
              if (res[0].chapterId && res[0].chapterSort != 1) {
                for (let i = 1; i < res[0].chapterSort; i++) {
                  if (this.courseList[outerIndex].assets.items[this.courseList[outerIndex].assets.items.length - i] && this.courseList[outerIndex].assets.items[this.courseList[outerIndex].assets.items.length - i].chapterId == res[0].chapterId) {
                    this.$set(this.courseList[outerIndex].assets.items[this.courseList[outerIndex].assets.items.length - i], "showStatus", 'show');
                  }
                }
              }
              this.courseList[outerIndex].assets.items = [...this.courseList[outerIndex].assets.items, ...res];
            }
            this.courseListAll = JSON.parse(JSON.stringify(this.courseList));
          }
          if (isPrev) {
            this.courseList[outerIndex].prevPage = currentItem.prevPage > 0 ? this.courseList[outerIndex].prevPage - 1 : 0;
          } else {
            this.courseList[outerIndex].nextPage = currentItem.nextPage < Math.ceil(currentItem.assets.itemCount / 20) + 1
              ? (this.courseList[outerIndex].nextPage + 1)
                : this.courseList[outerIndex].nextPage;
            this.courseList[outerIndex].isNextPage = currentItem.nextPage <= Math.ceil(currentItem.assets.itemCount / 20) ? true : false;
          }
          if (!this.courseList[outerIndex].show) {
            this.$set(this.courseList[outerIndex], 'show', true);
          }
          resolve()
        }, failRes => {
          this.loadingClass = false;
          reject()
        });
      })
    },
    /**
     * 解析地址
     */
    decryptDirList(list, prodType) {
      // for (let item of list) {
      //   if (item.assets && item.assets.items && item.assets.items.length) {
          for (let cItem of list) {
            if (cItem.videoMp4UrlEncode) {
              cItem.videoMp4Url = decrypt(cItem.videoMp4UrlEncode);
            }
            if (cItem.videoUrlEncode) {
              cItem.videoUrl = decrypt(cItem.videoUrlEncode);
            }
            if (cItem.audioUrl && prodType == 111) {
              cItem.audioUrl = decrypt(cItem.audioUrl);
            }
            if (cItem.m3u8Url) {
              cItem.m3u8Url = decrypt(cItem.m3u8Url);
            }
            if (cItem.mp3Url) {
              cItem.mp3Url = decrypt(cItem.mp3Url);
            }
          }
      //   }
      // }
    },
    getRelation: function () {
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "common/relevance",
        { objId: this.extId, ckFrom: this.ckFrom == this.cfrom.flashSalesColumn ? 9 : this.ckFrom },
        function (res) {
          $this.relationData = res;
          if (!$this.hasRelation && $this.relationData && ($this.relationData.columns.length > 0 || $this.relationData.courses.length > 0 || $this.relationData.datums.length > 0 || $this.relationData.circle.length > 0 || $this.relationData.exams.length > 0 || $this.relationData.goods.length > 0 || $this.relationData.mutuals.length > 0 || $this.relationData.socials.length > 0 || $this.relationData.speechs.length > 0)) {
            $this.hasRelation = true;
            $this.tabList.push({
              title: '推荐',
              index: 3,
            });
          }
        }
      );
    },
    watchRecord: function () {
      let data = {
        ckFrom: this.distribution ? 54 : this.cfrom.column,
        extId: this.extId,
        cId: -1
      };
      utilJs.postMethod(global.apiurl + "common/playRecord", data, function (res) {

      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    //作为分享页被推荐人进入
    isRecommendPage() {
      let recRelateId = this.recRelateId; //推荐人ID
      let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
      let bindPhone = this.$route.query.bindPhone; //完成推荐绑定手机号
      let data = { relateId: recRelateId };
      if (recRelateId) {
        if (recType == 1) {
          this.$refs.recommendPresent.completetRecommendTask(data);
        } else if (recType == 2) {
          if (bindPhone) {
            data.mobile = localStorage.getItem("uMobile");
            this.$refs.recommendPresent.completetRecommendTask(data);
          } else if (!localStorage.getItem("uMobile")) {
            utilJs.goBindMobile({
                recRelateId: recRelateId,
                recType: recType,
                goColumn: 1,
                cId: this.cId,
                extId: this.extId,
                ckFrom: this.ckFrom
            });
          } else {
            this.$cjConfirm({
              title: '领取失败',
              message: '您已绑定过手机号，不在推荐范围，无法领取奖励',
              showCancelButton: false,
            })
          }
        }
      }
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;
      if (this.distribution) {
        shareUrl = shareUrl + "&distribution=1";
      }
      // if ((this.courseIndex > 0 || this.courseItemIndex > 0) && this.dataInfo.hasPermission) {
      //   shareUrl = `${shareUrl}&courseIndex=${this.courseIndex}&courseItemIndex=${this.courseItemIndex}`
      // }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "购买专栏更优惠哦~");

      if ((this.ckFrom == this.cfrom.collageColumn || this.ckFrom == this.cfrom.distributionCollageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = '【邀您一起拼团】' + title;
      }
      if (this.dataInfo.sales) {
        title = '【限时抢购】' + title;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.ckFrom == this.cfrom.column && this.dataInfo.collage == null && this.dataInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      let $this = this;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {
        $this.shareGetIntegration();
      });
    },
    //手机端分享
    appShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;
      if (this.distribution) {
        shareUrl = shareUrl + "&distribution=1";
      }
      // if ((this.courseIndex > 0 || this.courseItemIndex > 0) && this.dataInfo.hasPermission) {
      //   shareUrl = `${shareUrl}&courseIndex=${this.courseIndex}&courseItemIndex=${this.courseItemIndex}`
      // }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "购买专栏更优惠哦~");

      if ((this.ckFrom == this.cfrom.collageColumn || this.ckFrom == this.cfrom.distributionCollageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = '【邀您一起拼团】' + title;
      }
      if (this.dataInfo.sales) {
        title = '【限时抢购】' + title;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.ckFrom == this.cfrom.column && this.dataInfo.collage == null && this.dataInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    initData() {
      isChange = false;
      this._reportStudyDetail = {};
      this.isLoading = false;
      this.loadingClass = false;
      this.tabhBarFixed = false;
      this.goToLast = false;
      this.goodsRoomId = this.$route.query.goodsRoomId || '';
      this.cId = this.$route.query.cId || -1;
      this.extId = this.$route.query.extId || -1;
      this.ckFrom = this.$route.query.ckFrom || global.ckFrom.column;
      this.accessToken = this.$route.query.accessToken;
      this.distribution = this.$route.query.distribution ? Number(this.$route.query.distribution) : 0;
      // this.distributionId = this.$route.query.distribution && Number(this.$route.query.distribution) == 1 ? this.$route.query.extId : 0;
      this.distributionId = this.distribution;//分销专栏不需要id，只要判断是不是分销
      this.recType = this.$route.query.recType || 0;
      this.recRelateId = this.$route.query.recRelateId || ""; //推荐人ID
      this.tabList = [{
        title: '详情',
        index: 0,
      }, {
        title: '目录',
        index: 1,
      }];
      this.typeBar = 0;
      this.dataInfo = "";
      this.is_page = false;
      this.page = 1;
      this.limit = 10;
      this.courseList = [];
      this.relationData = "";
      this.isShowPresent = false;
      this.showShareMoneyTip = true;
      this.sort = this.cfg.enableColumnOrderType == 1 ? 'asc' : 'desc'; //排序方式 升序：asc，降序：desc
      this.hasRelation = false;
      this.cloroRGB = THEME_RGB_MAP[this.theme];
      this.faStatus = 1;
      this.discountList = [];
      this.equityList = [];
      this.familyCardData = [];
      this.integral = 0;
      this.checkText = '';
      this.showCouseList = false;
      this.isAutoPlaying = false; //点击任意一节开始播放后，进入自动播放
      this.currentPageEnd = false; //正在播放的页面已经全部播放完毕
      this.courseIndex = 0;
      this.courseItemIndex = 0;
      this.watchTime = 0;
      this.audioPlayTime = 0;
      this.audioMp3Src = "";
      this.audioM3u8Src = "";
      this.indexAll = -1;
      this.showAllCourse = true;
      this.hasListen = false;
      this.hasDescSort = false;
      this.relatedList = [];
      this.showIntegrate = false; //获取积分提示
      this.integrateCount = 0;
      this.showFormText = false;
      this.showCombo = false;
      this.belongLoading = false;
      this.belongPackageList = [];
      this.belongColumnList = [];
      this.pagePackage = 1;
      this.pageColumn = 2;
      this.descriptList = [];
      this.commentStatus = 0;
      this.hasClickPlay = false;
      this.longestTime = 0;
      this.tenObj = null;
      this.clientW = document.documentElement.clientWidth > 640 ? 640 : document.documentElement.clientWidth;
      this.videoH = this.clientW / 320 * 180;
      this.tenData = { havePermission: 0, payerName: '', checkCode: '', vuVlue: '', vidVlue: '', onlineLogo: '', clientW: this.clientW, videoH: this.videoH, autoplay: false };
      this.playType = 1;
      this.popRelateCourse = false;
      this.hasExpired = false;
      this.showMarketingBuyBtn = false;
      this.isSelectedVoice = false;
      this.showBottomPlayer = false;
      this.timePercent = 0;
      this.playStatus = 0;
      this.showTryEnd = false;
      this.fromBackColumn = this.$route.query.fromBackColumn ? true : false;
      this.hasSharePosition = false;
      this.isOnPlaying = false;
      this.goInCssFull = false;
      this.hasAudio = true;
      this.timingPutOn = false;
      this.isOffSale = false;
      lastScroll = 0;
      playedDuration = 0; //某个视频累计播放时长
      startSt = 0;
      endSt = 0;
      this.scrollDirection = 0;
      this.showProcessBar = true;
      this.isIosAudioApp = utilJs.isIosAudioApp();
      this.isAndroidAudioApp = utilJs.isAndroidAudioApp();
      this.moveDirection = 0;
      this.showGpModal = false;
      this.popGift = false;
      this.relateCollocation = [];
      this.showPackageList = false;
      this.chainInfo = '';
      this.isChainProd = false;
      this.optimal = null;
      this.moreDeviceType = 1;
      this.isVideoToAudio = false;
      this.$store.commit("updateHasNoticeText", false);
      if (!this.distributionId) {
        getBindPhoneSetting(this.cfrom.column).then(res => {
          this.bindPhoneSetting = res;
        });
        getBindPhoneSetting(110).then(res => {
          this.videoBindPhoneSetting = res;
        });
        getBindPhoneSetting(111).then(res => {
          this.audioBindPhoneSetting = res;
        });
        utilJs.getChainInfo(this.cfrom.column, this.extId).then(res => {
          this.chainInfo = res;
          this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
        });
      } else {
        getBindPhoneSetting(1003).then(res => {
          this.bindPhoneSetting = res;
          this.videoBindPhoneSetting = res;
          this.audioBindPhoneSetting = res;
        });
      }
      this.closePicInPic();
      this.isRecommendPage();
      this.getColumnDetail();
      // this.getDescptionDetail();
      this.buyedInfoSwiper()
      this.judgeCompliance()
    },
    toLeave() {
      this.$store.commit("updateHasNoticeText", false);
      this.hasAudio = false;
      this.destroyPlayer();
      this.$refs.gpModal.selectShopNum = 0;
      this.is_page_package = false;
      this.is_page_column = false;
      if (this.openAppScreen) utilJs.sendDataToAppWebview('restartScreenRecording')
      window.removeEventListener('scroll', this.handleScroll);
      document.getElementById("modelCourseList") && document.getElementById("modelCourseList").removeEventListener('scroll', this.handleScroll);
      sessionStorage.removeItem(this.extId + 'rewardPoints');
    },
    colseModal() {
      this.showGpModal = false;
    },
    groupPurchasePay(selectNum) {
      this.clickBuyNow(selectNum);
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.courseList.length != 0) {
      if (this.courseList[this.courseIndex].hasPermission && this.courseList[this.courseIndex].courseType == 1 && this.courseList[this.courseIndex].assets && this.courseList[this.courseIndex].assets.items.length > 0 && this.courseList[this.courseIndex].assets.items[this.courseItemIndex] && this.courseList[this.courseIndex].assets.items[this.courseItemIndex].isPlaying && startSt != 0) { //将之前播放的停掉
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        if (curPlayTime > 2 && totalTime != 0 && playedDuration > 0.2) {
          let progress = Number(curPlayTime / totalTime).toFixed(2);
          this.courseList[this.courseIndex].assets.items[this.courseItemIndex].curProgressRatio = progress;
          this.setProgress(this.courseList[this.courseIndex].assets.items[this.courseItemIndex].detailId, progress, this.isVideoToAudio ? 0 : 1, playedDuration);
        } else {
          startSt = 0;
          endSt = 0;
          playedDuration = 0;
        }
        this.stopVoice();
      }
    }
    next();
  },
  async activated() {
    setDocumentTitle("专栏详情");// eslint-disable-line
    this.couponPage = 1;
    this.couponIsPage = false;
    this.couponLoading = false;
    this.showCoupon = false;
    this.couponList = [];
    this.showSearch = false;
    this.searchWord = '';
    this.openAppScreen = false;
    this.showWeaAppDialog = false;
    this.recordingSetting = null;
    this.isApp = utilJs.isAndroidApp() || utilJs.isIOSAppALL();
    this.initData();
    await utilJs.getScreenRecordingSetting().then(res => {
      this.recordingSetting = res;
    })
    if (this.$route.query.distribution && Number(this.$route.query.distribution) > 0) {
      window.addEventListener('pageshow', function (event) {
        if (event.persisted) { // ios 有效, android 和 pc 每次都是 false
          location.reload();
        } else { // ios 除外
          if (sessionStorage.getItem('refresh') === 'true') {
            location.reload();
          }
        }
        sessionStorage.removeItem('refresh');
      });
    }
  },
  deactivated() {
    this.toLeave();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
.icon-course-mark {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.top1 {
  top: 1.7rem;
}
.top2 {
  top: 10.7rem;
}
.tab-bar-ios {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 9999;
}
.c-lh64 {
  line-height: 1.6rem;
}
.input {
  font-size: 0.65rem;
  padding: 0 0 0 0.4rem;
  border: 0;
  background: none;
  outline: none;
}

.input:focus {
  outline: none;
}
.input::-webkit-search-decoration,
.input::-webkit-search-cancel-button {
  display: none;
}
.c-p-t132 {
  top: 3.2rem;
}
.br-tbr8 {
  border-radius: 0.2rem 0 0.2rem 0;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.stop-animation > div {
  animation-play-state:paused!important;
  -webkit-animation-play-state:paused!important; /* Safari 和 Chrome */
}
.line-scale-pulse-out > div {
  width: 0.05rem;
  height: 0.5rem;
  border-radius: 2px;
  margin: 0 1px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.line-scale-pulse-out > div:nth-child(2),
.line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}
.line-scale-pulse-out > div:nth-child(1),
.line-scale-pulse-out > div:nth-child(5) {
  -webkit-animation-delay: -0.2s !important;
  animation-delay: -0.2s !important;
}

@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
.bg-fa {
  background: url("../../../../public/i/wap/course/friendsHelpBg.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.br-course-list {
  border-radius: 0.6rem 0.6rem 0 0;
}
.minh76 {
  min-height: 1.9rem;
}
.vcAlign-middle {
  vertical-align: middle;
}
.c-p-b270 {
  bottom: 6.75rem;
}
.c-br-b {
  border-bottom-left-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.black-transition {
  opacity: 0.7;
  background: linear-gradient(180deg,rgba(0,0,0,0.00), #000000);
}
.video-tabbar {
  position: fixed;
  max-width: 16rem;
}
.top360 {
  top: 9rem;
}
.top428 {
  top: 10.7rem;
}
.top480 {
  top: 12rem;
}
.top548 {
  top: 13.7rem;
}
.hh436 {
  height: 10.9rem;
}
.hh556 {
  height: 13.9rem;
}
.c-p-b88 {
  bottom: 2.2rem;
}
.p-t-10 {
  top: -0.25rem
}
.p-t-14 {
  top: -0.35rem
}
.p-t6{
  top:0.15rem;
}
.r-14 {
  right: -0.35rem;
}
.p-t-2 {
  top: -2px;
}
.p-r-1 {
  right: -1px;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter2 {
  backdrop-filter: blur(10px);
}
.filter-blur {
  filter: blur(3px);
}
.box-shadow-player {
  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
}
.line-scale-pulse-out2 > div {
  height: 0.5rem;
  margin: 0 0.5px;
  width: 2px;
  border-radius: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.line-scale-pulse-out2 > div:nth-child(2),
.line-scale-pulse-out2 > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}
.cover-rotate{
  -webkit-animation:coverRotate 20s infinite linear;
  animation:coverRotate 20s infinite linear;
}
.small-bottom-line:after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
}
.c-pr28 {
  padding-right: 0.7rem;
}
.translucent-white95
{
  background-color: rgba(255, 255, 255, 0.95);
}
.bg-change{
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.00));
}
.c-bd1-white {
  border: 1px solid #fff;
}
.cover-img-wrap {
  border: 1px solid rgba(255,255,255,0.40);
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-webkit-keyframes coverRotate {
  0%{
    -webkit-transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
  }
}
@keyframes coverRotate {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.moveRight {
  animation: move-right 0.15s linear;
  -webkit-animation: move-right 0.15s linear;
}
@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.moveLeft {
  animation: move-left 0.15s linear;
  -webkit-animation: move-left 0.15s linear;
}
@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bg-ccc {
  background-color: #ccc!important;
}
.fc-3F73F8 {
  color: #3F73F8;
}
/deep/ {
  .video-rotate-status {
    overflow: visible;
    .video-js.vjs-fullscreen {
        width: 100vh !important;
        height: 100vw !important;
      }
  }
  .item-rotate {
    font-size: 2em;
  }
  .video-rotate{
    padding: 0 1.2em 0 0.2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #videoBox .vjs-control-bar{
    z-index: 99;
  }
}
</style>
<style>
.clamp {
  position: absolute;
  left: 0;
}
.cuser-marque {
  animation: cusermarquemove 24s linear infinite;
}
@keyframes cusermarquemove {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
.cuser-vertical-marque {
  animation: cuserverticalmarquemove linear infinite;
}
@keyframes cuserverticalmarquemove {
  from {
    top: 100%;
  }
  to {
    top: -250%;
  }
}
.ccopyright-marque {
  animation: cvideomarquemove linear infinite;
}
@keyframes cvideomarquemove {
  from {
    top: 0;
    left: 100%;
  }
  to {
    top: 0;
    left: -280%;
  }
}
.xgplayer-skin-default .xgplayer-controls {
  z-index: 1001!important;
}
.left96p {
  left: 96%;
}
.tp50 {
  top: 50%;
}
.translate-y-100 {
  transform: translateY(-102%);
}
.top50p {
  top: 50%;
}
.top100p {
  top: 100%;
}
.xgplayer-skin-default .xgplayer-progress {
  left: 50px!important;
  right: 50px!important;
}
.xgplayer-skin-default .xgplayer-time .xgplayer-time-current:after {
  content: ""!important;
}
.xgplayer-skin-default .xgplayer-time span {
  color: #fff!important;
  position: absolute;
  top: -25px;
  right: 10px;
}
.xgplayer-skin-default .xgplayer-time .xgplayer-time-current {
  left: 10px!important;
  right:inherit;
}
.goInCssFull-style {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 102;
}
.badge-bg {
  width: 100%;
  height: 2.9rem;
  background: url('../../../assets/i/wap/camp/badge-bg.png') no-repeat center center;
  background-size: contain;
}
.c-hh480 {
  height: 12rem;
}
.fastForward .vjs-pdt-time {
  display: none;
}
.fastForward .forward-btn, .fastForward div.vjs-playback-rate, .fastForward .vjs-fullscreen-control, .fastForward .vjs-play-control {
  width: 3em;
}
.loader {
  border: 3px solid #f3f3f3; /* 浅灰色 */
  border-top: 3px solid var(--mb7color); /* 蓝色 */
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: spin 2s linear infinite;
  margin: 0.4rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

